js百分比載入進度條效果
分享一段程式碼例項,它實現了載入進度條效果。
資料能夠實時變化,並且進度條以百分比顯示,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .box { width: 1200px; margin: 100px auto; } .div1 { height: 20px; width: 100px; border: 1px solid gray; padding: 2px; } #div2 { height: 20px; width: 0; background-color: green; position: absolute; } </style> <script> var timer=null; var width=0; function start(){ timer = setTimeout(onChange, 10); } function stop(){ clearInterval(timer); } function onChange(){ if(width==100){ window.clearInterval(timer); }else{ width+=1; document.getElementById("div2").style.width=width+"px"; document.getElementById("div2").innerHTML=Math.round(width)+"%"; timer=setTimeout(onChange,100); } } window.onload = function () { var ostart = document.getElementById("start"); var ostop = document.getElementById("stop"); ostart.onclick = function () { start() } ostop.onclick = function () { stop() } } </script> </head> <body> <div class="box"> <div class="div1"> <div id="div2"></div> </div> <br /> <input id="start" type="button" value="開始" /> <input id="stop" type="button" value="停止" /> </div> </body> </html>
相關文章
- Js 百分比進度條JS
- canvas環形百分比進度條效果Canvas
- jQuery環形旋轉載入進度條效果jQuery
- CSS3 螺紋載入進度條效果CSSS3
- javascript百分比進度條效果程式碼例項JavaScript
- vue中頁面載入進度條效果的實現Vue
- javascript實現的帶有百分比的進度條效果JavaScript
- 超酷jQuery進度條載入動畫集合jQuery動畫
- YCProgress自定義百分比進度條
- JavaScript百分比動態進度條JavaScript
- svg環形百分比進度條SVG
- ajax進度條 非同步下載進度條非同步
- jQuery 進度條效果程式碼jQuery
- canvas環形進度條效果Canvas
- CSS快遞進度條效果CSS
- 可愛!帶有數字顯示的載入進度條效果外掛
- Android偽圖片載入進度效果Android
- 常見的網頁載入進度條網頁
- iOS UIWebView載入時新增進度條01iOSUIWebView
- jQuery載入進度條例項程式碼jQuery
- 如何實現圖片預載入和載入進度條
- js結合progress標籤實現的進度條效果JS
- Android 自定義圓形旋轉進度條,仿微博頭像載入效果Android
- jQuery實進度條效果詳解jQuery
- canvas百分比環形進度條程式碼Canvas
- 專案需求討論-WebView進度載入條WebView
- 前端資源預載入並展示進度條前端
- js實現圓環百分比載入等待效果程式碼例項JS
- 短視訊商城系統,Android進度條,自定義進度條,顯示百分比Android
- C# 下載帶進度條程式碼(普通進度條)C#
- vue 自定義指令實現,滾動條百分比進度條。Vue
- JavaScript 動態進度條效果詳解JavaScript
- iOS實現音訊進度條效果iOS音訊
- 實現環形進度條效果【一】
- CSS3圓形進度條效果CSSS3
- jQuery進度條效果程式碼例項jQuery
- CSS3進度條效果程式碼CSSS3
- 【新特性速遞】進度條,進度條,進度條