當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
js练手小项目——JavaScript实现进度条
生活随笔
收集整理的這篇文章主要介紹了
js练手小项目——JavaScript实现进度条
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
setInterval( )定義和用法
setInterval() 方法可按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式。
setInterval() 方法會(huì)不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)。
語法：
setInterval(code,millisec[,"lang"])| 參數(shù) | millisec |
| code | 必需。要調(diào)用的函數(shù)或要執(zhí)行的代碼串。 |
| millisec | 必須。周期性執(zhí)行或調(diào)用 code 之間的時(shí)間間隔，以毫秒計(jì) |
返回值：
一個(gè)可以傳遞給 Window.clearInterval() 從而取消對(duì) code 的周期性執(zhí)行的值。
實(shí)現(xiàn)代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>javaScript實(shí)現(xiàn)進(jìn)度條——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">點(diǎn)我改變進(jìn)度條</button><script>var animation=document.getElementById("animation");function changeBar(){var pos=0;// setInterval(函數(shù)，完成時(shí)間) var id=setInterval(frame,5);function frame(){//寬度達(dá)到最大100% 就停止if(pos==100){clearInterval(id);}else{pos++;//JavaScript可以改變cssanimation.style.width=pos+"%";}}}</script></body> </html>結(jié)果展示
?
?
總結(jié)
以上是生活随笔為你收集整理的js练手小项目——JavaScript实现进度条的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： atom为什么可以运行android,I
- 下一篇： gradle idea java ssm