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

Posted 欢迎

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模仿下载进度条效果的主要内容,如果未能解决你的问题,请参考以下文章

[突发奇想的JS小案例] 1 捉苍蝇

[突发奇想的JS小案例] 2 重力模拟

[突发奇想的JS小案例] 2 重力模拟

模仿进度条效果

仿苹果AppStore 下载进度条

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