JS实现进度条效果
Posted Davis16
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS实现进度条效果相关的知识,希望对你有一定的参考价值。
源代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> *{ margin: 0px auto; } #wk{ width: 800px; height: 100px; border: 1px solid black; } #zb{ height: 100px; background-color: red; float: left; } #yb{ height: 100px; background-color: blue; float: left; } </style> <body> <div id="wk"> <div id="zb" style="width: 50px;"> </div> <div id="yb" style="width: 750px;"> </div> </div> </body> <script type="text/javascript"> var zb = document.getElementById(\'zb\'); var yb = document.getElementById(\'yb\'); var w = window.setInterval("Hua()",20);//调用函数,赋给一个变量方便清除调用 function Hua(){ if (parseInt(zb.style.width) == 750 ) { window.clearInterval(w); //清除调用 return; //停止函数 } zb.style.width = parseInt(zb.style.width)+4 +"px"; yb.style.width = parseInt(yb.style.width)-4 +"px"; } </script> </html>
效果如下:
以上是关于JS实现进度条效果的主要内容,如果未能解决你的问题,请参考以下文章
js 代码实现视频进度条点到哪个位置就播放那个位置的视频。进度条是用css样式另做的。