1.6 (案例)progress.html

作者: 柒月柒日晴7 | 来源:发表于2017-06-07 14:33 被阅读0次

1.6 (案例)progress.html
尺寸
3.25|活在别人的眼光中是对自己的不尊重
3.8|没有永恒的黑暗只有未达的黎明
3.7|待此清凉月，可涤人间尘
3.15|晚睡的女孩会被月亮抓去罚站的
3.21|要喜欢那些心情不好也不舍得凶你的人
3.22|在你的星球做最可爱的宇航员
3.4复盘|不要念旧，念书
小猴子建筑资料今日更新内容0822

下载开始效果图.png

下载完成效果图.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<progress>是HTML 5中新增的状态交互元素，用来表示页面中的某个任务完成的进度（进程），如下载文件时，文件下载到本地的进度值，可以通过该元素动态展示在页面中，展示的方式既可以使用整数（如1到100），也可以使用百分比（如10%到100%）。 
</progress>
<!--<progress></progress>-->
    <p id="pTip">开始下载</p>
    <progress value="0" max="100" id="proDownFile"></progress>
    <!-- <input type="range" id="range" max="100" value="0"></input> -->
    <input type="button" value="下载" class="inputbtn" onClick="Btn_Click();">
    <script>
        var intValue = 0;
        var intTimer;
        var objPro = document.getElementById('proDownFile');
        var objTip = document.getElementById('pTip');
        function Interval_handler() {
            intValue++;
            objPro.value = intValue;
            //给进度条赋值改变进度条进度
            if (intValue >= objPro.max) {
                clearInterval(intTimer);
                objTip.innerHTML = "下载完成!";
            } else {
                objTip.innerHTML = "正在下载" + intValue + "%";
            }
        }
        function Btn_Click() {
            intTimer = setInterval(Interval_handler, 100);
        }
    </script>
</body>
</html>