模仿进度条效果

Posted taohuaya

tags:

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

 

进度条效果

 

<!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>

 

浏览器效果：

技术分享图片

 

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

Qt 自定义 滚动条 样式（模仿QQ）

活动到片段方法调用带有进度条的线程

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

仿苹果AppStore 下载进度条

当片段视图加载是异步任务的一部分时，如何在片段加载之前显示进度条？

自定义对话框片段内的进度条 - 如何从 AsyncTask 传递进度？