动态进度条

来源：互联网发布：梦幻西游手游网页版mac 编辑：程序博客网时间：2024/05/20 14:41
这里写图片描述
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            #container{width: 500px;height: 300px;background: #AFEEEE;position: relative;top: 200px;left: 400px;}            #start{width: 100px;height: 50px;text-align:center;line-height:50px;            position: absolute;top: 210px;left: 90px;background: #FF0000;}            #end{width: 100px;height: 50px;text-align:center;line-height:50px;            position: absolute;top: 210px;left: 290px;background: #FF0000;}            h2{position: absolute;top:30px ;left: 90px;}            p{position: absolute;top:120px ;left: 90px;}            .box{width: 300px;height: 30px;border: 1px dotted black;position: absolute;top: 100px;left: 90px;border-radius: 30px;overflow: hidden;}            .box2{width: 0px;height: 30px;background: red;}        </style>        <script type="text/javascript">            var timeId = 0;            function start(){                //获取标签                var box2 = document.getElementsByClassName('box2')[0];                var n = 0;                var pp = document.getElementsByTagName('p')[0];                //定时器开始                timeId = setInterval(function(){                    //设置进度条的长度,并判断,如果达到100%,就停止                    if(n==300){clearInterval(timeId)};                    n++;                    //给进度条加像素,效果图                    box2.style.width = n + 'px';                    //  进度条的百分比                    var s = parseInt(n/3);                    pp.innerHTML = s+'%';                },50)            }            function end(){                    clearInterval(timeId);            }        </script>    </head>    <body>        <div id = 'container'>            <h2>进度条</h2>            <div class = 'box'>                <div class = 'box2'></div>            </div>            <p>0%</p>            <input type="button"  onclick="start()" value = 'start'  id = 'start' />            <input type="button"  onclick="end()" value = 'end' id = 'end'/>        </div>    </body></html>
阅读全文
0 0