突发奇想，JavaScript模仿下载进度条效果

Posted 2020-12-31 欢迎

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了突发奇想，JavaScript模仿下载进度条效果相关的知识，希望对你有一定的参考价值。

不定时的更新，这一次采用javascript 模仿下载进度条效果。原理：两个div嵌套，里面的宽度0，外部自己随便定义，采用 setInterval() 函数增加里面的div 的 width的值，使其背景色慢慢平铺开来，同时增加一个计数值“index” 表示进度。采用

 window.getComputedStyle()函数获取宽度.

直接show code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #fa{
            width: 600px;
            height: 50px;
            margin: 100px auto;
            background-color:#ffffff;
            border: 0.5px solid #999999;
            border-radius: 1px;
            box-sizing: content-box;
        }
        #ch{
            width: 0px;
            height: 50px;
            background-color: pink;
            text-align: right;
            color: green;
            line-height: 50px;
            box-sizing: content-box;
        }
    </style>
</head>
<body>
        <div id="fa">
        <div id="ch">

        </div>
        </div>

<script type="text/javascript">
    window.onload=function () {
        var ta_length=600;  //fa 的宽
        var ta_time=200;// 走到头的时间
        var ta_min=20;// 走一步的速度

        Ago(ta_length,ta_time,ta_min); //调用函数

    function Ago(ta_length,ta_time,ta_min) {

           var  elem=document.getElementById("ch"); //获取ch
           var fa=document.getElementById("fa");
           var stepLength=ta_length/ta_time;
           var cover=0;
           var index=0;
            alert("开始下载");
          var step=function() {
                   index+=0.5;
               if (cover+stepLength<=ta_length){
                   elem.style.width=parseFloat(getStyle(elem,‘width‘))+stepLength+‘px‘; //获取的宽度与每一步stapLength相加

                   elem.innerHTML=index+"%";// 计数值

                   cover+=stepLength; // ch的宽度增加
                      
                        if (index==100){
                            elem.style.backgroundColor="green";//百分百后背景颜色变化
                        }
               }
               else {
                   fa.style.border="0px";
                   clearInterval(IntervalId);
                   elem.style.border="1px solid green";
                   elem.innerHTML=" ";
                   alert("下载完成");
               }
           }
        var IntervalId=setInterval(step,ta_min);
    }
    function getStyle(elem,cssname) {
        if(window.getComputedStyle){
            return window.getComputedStyle(elem)[cssname] //获取ch 的宽度
        }else{
            return elem.currentStyle[cssname];
        }
    }
    }
</script>
</body>
</html>

您可以：点击这里查看效果

以上是关于突发奇想，JavaScript模仿下载进度条效果的主要内容，如果未能解决你的问题，请参考以下文章

Android学习笔记---使用Service模仿下载效果