JS实现进度条

来源：互联网发布：淘宝待揽件是什么意思编辑：程序博客网时间：2024/06/11 04:47

超时函数控制，每隔一秒钟就会执行指定的超时函数，再指定的超时函数里设置进度条的标签的长度，即可完成进度条的显示。

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>进度条设计</title>    <style>        #frame{            overflow: hidden;            width: 300px;            border-radius: 50px;            border:2px solid black;            border-bottom-width: 4px;            border-top-width: 3px;        }        .border{            margin:15px 30px;            border:2px solid black;            height: 30px;            overflow: hidden;            position: relative;        }        .bar{            width: 5%;            height: 100%;            background:pink;            border-top-right-radius: 10px;            border-bottom-right-radius: 10px;            transition:all 0.1 ease-in-out 0s;        }        .percentage{            position: absolute;            left: 0;            top: 0;            width: 100%;            text-align: center;            padding:5px;            color:#f9ec75;            font-weight: bold;        }    </style>    <script>        window.setTimeout('update();', 0);        function update(){            var frm = document.getElementById('frame');            var list = document.getElementsByTagName('div');            var bar;            for(var i=0;i<list.length;i++){                if(list[i].className == 'bar'){                    bar = list[i];                }            }            if(bar.style.width == ''){                bar.style.width = '6%';            }else{                bar.style.width = parseInt(bar.style.width)+1+'%';            }            bar.nextSibling.nextSibling.textContent = parseInt(bar.style.width)-5+'%';            if(bar.style.width != '105%'){                window.setTimeout('update();', 100);            }        }    </script></head><body><div id="frame">    <div class="border">        <div class="bar"></div>        <div class="percentage">0%</div>    </div></div></body></html>

效果图：
这里写图片描述

代码分析：
最内部div用户绘制进度条，其外面的div标签用于绘制装载进度条的狹槽，最外部的div标签用于绘制外壳效果。
在本程序的运行中，发现有停滞效果，这是因为JavaScript程序和CSS3的transition属性不一致所造成的。如果希望进度条过度顺利可以取消超时函数里面的超时重设，并直接将进度条设置为超过100%，并将transition属性的变化时间设置为较长的时间即可。

阅读全文

0 0