JavaScript进度条的简单案例 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            #progress{
                position: relative;
                margin: auto;
                top: 200px;
                display: block;
                width: 200px;
                height: 20px;
                border-style: dotted;
                border-width: thin;
                border-color: darkgreen;
            }
            #filldiv{
                position:absolute;
                top: 0px;
                left: 0px;
                width: 0px;
                height: 20px;
                background: blue;
            }
            #percent{
                position: absolute;
                top: 0px;
                left: 200px;
            }
        </style>
</head>    
    <body>
        <div id="progress">
            <div id="filldiv"></div>
            <span id="percent">0</span>
        </div>
        <script>
            // 原理就是让里面的div随着定时器 让他的width慢慢增加

            // 获取需要操作的dom对象
            var $progress = document.querySelector('#progress');
            var $filldiv = document.querySelector('#filldiv');
            var $percent = document.querySelector('#percent');

            // 设置定时器 
            var timer = setInterval(function () {
                $filldiv.style.width = $filldiv.offsetWidth + 1 + 'px';
                // 设置百分比与进度条同步
                $percent.innerHTML = parseInt(($filldiv.offsetWidth/200)*100) + "%";
                // 当进度条走到顶端 清除定时器
                if ($filldiv.offsetWidth == 200) {
                    clearInterval(timer);
                }
            },20);
        </script>
    </body>
</html>

如上，比较简单

posted on 2019-03-08 11:35  友人H  阅读(153)  评论(0)    收藏  举报

导航