1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > js练手小项目——JavaScript实现进度条

js练手小项目——JavaScript实现进度条

时间:2021-10-05 02:34:01

相关推荐

js练手小项目——JavaScript实现进度条

setInterval( )定义和用法

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法:

setInterval(code,millisec[,"lang"])

返回值:

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

实现代码:

<!DOCTYPE html><html><head><meta charset="utf-8"><title>javaScript实现进度条——progressbar</title><!-- <link rel="stylesheet" type="text/css" href="new_file.css"> --><style>.bar{width:100%;height:50px;background-color: azure;border:black solid 1px;margin-bottom:20px;padding:0px;}#animation{width:0%;height: 100%;background-color: palevioletred;opacity: 0.8;margin: 0px;}.btn{position: relative;left:40%;}</style></head><body><div class="bar"><div id="animation"></div></div><button onclick="changeBar()" id="btn">点我改变进度条</button><script>var animation=document.getElementById("animation");function changeBar(){var pos=0;// setInterval(函数,完成时间) var id=setInterval(frame,5);function frame(){//宽度达到最大100% 就停止if(pos==100){clearInterval(id);}else{pos++;//JavaScript可以改变cssanimation.style.width=pos+"%";}}}</script></body></html>

结果展示

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。