js結合progress標籤實現的進度條效果
分享一段程式碼例項,它實現了動態進度條效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> </head> <body> <progress id="progress" min="0" max="100"></progress> <script> var progress = document.getElementById('progress'); /*初始化最低*/ progress.setAttribute('value', 0); update(); /*寫個時間的方法呼叫progress , 直到進度條滿了*/ function update() { /*不用setInterval*/ setTimeout(function() { this.getProgress(); if (checkProgress() === 1) { this.update(); } }, 1000); } function checkProgress() { var progressNow = parseInt(progress.getAttribute('value'), 10); if (progressNow >= 100) { return -1; } return 1; } function getProgress() { var progressNow = 10 + parseInt(progress.getAttribute('value'), 10); if (progressNow >= 100) { progressNow = 100; } setProgress(progressNow); } /*設定progress*/ function setProgress(progressNow) { progress.setAttribute('value', progressNow); } </script> </body> </html>
程式碼比較簡單,更多內容可以參閱相關閱讀。
相關閱讀:
(1).progress標籤可以參閱<progress>標籤一章節。
(2).document.getElementById()可以參閱document.getElementById()一章節。
(3).setAttribute()可以參閱setAttribute()一章節。
(4).getAttribute()可以參閱getAttribute()一章節。
相關文章
- jquery defered的progress方法實現進度條jQuery
- HTML <progress> 進度條HTML
- iOS實現音訊進度條效果iOS音訊
- 實現環形進度條效果【一】
- CSS3實現原型進度條效果CSSS3原型
- canvas實現具有粒子效果的動態進度條Canvas
- JS進度條順滑版實現JS
- css實現螺紋動態進度條效果CSS
- Javascript 及 CSS3 實現進度條效果JavaScriptCSSS3
- JS新增標籤效果JS
- vue中頁面載入進度條效果的實現Vue
- jQuery實進度條效果詳解jQuery
- js實現動態進度條詳解JS
- HTML中Progress標籤的定義及用法總結!HTML
- Xamarin XAML語言教程使用Progress屬性資料繫結設定進度條進度
- Xamarin XAML語言教程Progress屬性設定進度條進度
- js結合xml檔案實現的分頁效果JSXML
- jQuery監聽檔案上傳實現進度條效果jQuery
- javascript實現的帶有百分比的進度條效果JavaScript
- 實現列表懸浮標籤「頂上去」的效果
- 直播平臺搭建原始碼,uniapp progress進度條原始碼APP
- golang 進度條功能實現Golang
- clip實現圓環進度條
- 命令列進度條實現命令列
- 這才是我想要的彩虹進度條-[vue-ins-progress-bar]Vue
- js百分比載入進度條效果JS
- jQuery 進度條效果程式碼jQuery
- canvas環形進度條效果Canvas
- CSS快遞進度條效果CSS
- 騰訊 IVWEB 團隊 :Canvas 實現 progress 效果WebCanvas
- js實現的模擬滾動條效果JS
- 使用Java高速實現進度條Java
- ASP.NET實現進度條ASP.NET
- js實現的密碼強度提示效果JS密碼
- css實現的禁止標籤中內容選中效果CSS
- css3實現手機效果的“切換標籤”CSSS3
- JavaScript 原生實現進度條元件.mdJavaScript元件
- 【UWP】實現一個波浪進度條