當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript进度条（js实例）
生活随笔
收集整理的這篇文章主要介紹了
javascript进度条（js实例）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
利用javascript模擬下載進度條，可以防止重復點擊。
思路：用兩個div嵌套，開始時，初始時里面的div寬度為0，當點擊下載時，讓里面的div寬度一直+1，當加到100時停止。完成下載！
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>javascript進度條</title><style>body{display: flex;justify-content: center;align-items: center;min-height: 100vh;}.outer{width: 300px;height: 20px;border: 1px solid black;border-radius: 10px;margin-right:10px;}.inner{width: 0;height: 20px;line-height: 20px;border-radius: 10px;text-align: center;color: white;background-color: hotpink;}</style> </head> <body><div class="outer"><div class="inner"></div></div><button>下載</button><script>var outer = document.getElementsByClassName('outer')[0];var inner = document.getElementsByClassName('inner')[0];var button = document.getElementsByTagName('button')[0];//外部定義flage = true,var flag = true;button.onclick = function () {let w = 0;//flag = true,執(zhí)行下面代碼if(flag){//把flag變?yōu)閒alse，再次點擊也不會執(zhí)行里面的代碼（防止“下載”按鈕重復點擊）flag = false;//設置定時器，每100毫秒執(zhí)行一遍代碼timer = setInterval(function(){w ++;inner.style.width = w + "%";inner.innerHTML = w + "%";//w等于100，也就是等于100%時，清除定時器，控制臺打印“下載完成！”。if(w === 100){clearInterval(timer);console.log("下載完成！");}},100) }}</script> </body> </html>效果圖
總結(jié)
以上是生活随笔為你收集整理的javascript进度条（js实例）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android 类似锤子rom laun
- 下一篇： 计算机数据应用与维修,计算机检测维修与数