模仿进度条效果

 

进度条效果

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #progress{width: 400px; height: 30px; border: 1px solid black; position: relative;}
            #fill{position: absolute; top: 0px; left: 0px; width: 0px; height: 30px; background-color: red}
            #score{line-height: 30px; position: absolute; right: 0px}
        </style>
        <script>
            /*
                电影 1秒是24帧
                人眼能识别的最小的时间间隔是18帧。

             */
            window.onload = function(){
                var oProgress = document.getElementById("progress");
                var oFill = document.getElementById('fill');
                var oScore = document.getElementById('score');

                var speed = 2;
                var timer = setInterval(function(){
                    var currentWidth = parseInt(getStyle(oFill, "width"));
                    //计算百分比
                    oScore.innerHTML = parseInt(currentWidth / 400 * 100) + "%";

                    if(currentWidth == 400){
                        clearInterval(timer);
                    }else{
                        oFill.style.width = currentWidth + speed + 'px';
                    }
                    
                }, 30);
            }
            
        /*---------------封装的获取当前有效属性函数的兼容写法--------*/
        
            // 浏览器兼容写法
            function getStyle(node, styleType){
                return node.currentStyle ? node.currentStyle[styleType] : getComputedStyle(node)[styleType];
            }        
            /*---------------封装的获取当前有效属性函数的兼容写法end--------*/            




        </script>
    </head>
    <body>
        <div id = "progress">
            <div id = 'fill'></div>
            <span id = 'score'>0%</span>
        </div>
    </body>
</html>

 

浏览器效果：

 

仔细观看上面到最后的时候好像，没完全到头，下面代码是发现后修改的。

 

补充(略修改)：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>进度条</title>
 6     <style>
 7         #progress {width: 400px;height: 30px;border: 1px solid black;position:relative;}
 8         #in {width:0px;height:30px;background:cyan;position:absolute;left:0;}
 9         #num {line-height: 30px;position:absolute;right:0;}
10     </style>
11     <script>
12         window.onload = function(){
13             var oIn = document.getElementById('in');
14             var oNum = document.getElementById('num');
15             //每次增长的速度
16             var speed = 2;
17             //设置计时器, 每隔30ms执行一次
18             var timer = setInterval(function(){
19                 //获取当前有效样式
20                 var cur = parseInt(getStyle(oIn, 'width'));
21                 //设置增加后的宽度
22                 oIn.style.width = cur + speed + 'px';
23 
24                 //计算增加后的百分数（整数）并输出到页面
25                 oNum.innerHTML = parseInt((cur + speed) / 400 * 100)+ '%';
26 
27                 //判断增加后的宽度是否增长到头
28                 if(cur + speed == 400){
29                     //清除计时器
30                     clearInterval(timer);
31                 }
32 
33             },30)
34         }
35 
36         /*------------封装获取当前有效样式的函数-------------*/
37             function getStyle(node, styleType){
38                 return node.currentStyle? node.currentStyle[styleType] : getComputedStyle(node)[styleType];  
39             }
40         /*------------封装获取当前有效样式的函数end-------------*/
41 
42     </script>
43 </head>
44 <body>
45     <div id="progress">
46         <div id="in"></div>
47         <span id="num">0%</span>
48     </div>
49 </body>
50 </html>

浏览器效果：

 

 通过上图，可以看出这次刚刚好。

posted @ 2018-09-03 23:36  暗恋桃埖源  阅读(321)  评论(0)    收藏  举报