當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
js练手小项目——JavaScript实现进度条
生活随笔
收集整理的這篇文章主要介紹了
js练手小项目——JavaScript实现进度条
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
setInterval( )定義和用法
setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。
setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。
語法：
setInterval(code,millisec[,"lang"])| 參數 | millisec |
| code | 必需。要調用的函數或要執行的代碼串。 |
| millisec | 必須。周期性執行或調用 code 之間的時間間隔，以毫秒計 |
返回值：
一個可以傳遞給 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>結果展示
?
?
總結
以上是生活随笔為你收集整理的js练手小项目——JavaScript实现进度条的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： atom为什么可以运行android,I
- 下一篇： 【JavaScript】【5】定时器（包