javascript百分比進度條效果程式碼例項
分享一段程式碼例項,它實現了百分比進度條效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { padding: 0; margin: 0; } #progressBox { width: 300px; height: 40px; border: 1px solid #c8c8c8; background: #fff; position: relative; } #progressBar { position: absolute; top: 0; left: 0; z-index: 2; height: 40px; width: 100%; line-height: 40px; color: #fff; text-align: center; font-size: 20px; font-weight: bold; clip: rect(0px,40px,40px,0); background: #00a1f5; } #progressText { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 40px; line-height: 40px; color: #000; text-align: center; font-size: 20px; font-weight: bold; } </style> <script> window.onload = function() { var iNow = 0; var tiemr = setInterval(function() { if (iNow == 100) { clearInterval(tiemr) } else { iNow += 2; progressFn(iNow) } }, 30) function progressFn(cent) { var oDiv1 = document.getElementById('progressBox'); var oDiv2 = document.getElementById('progressBar'); var oDiv3 = document.getElementById('progressText'); var allWidth = parseInt(getStyle(oDiv1, 'width')); oDiv2.innerHTML = cent + '%'; oDiv3.innerHTML = cent + '%'; oDiv2.style.clip = "rect(0px," + cent / 100 * allWidth + "px,40px,0)"; function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr] } else { return getComputedStyle(obj, false)[attr] } } } } </script> </head> <body> <div id="progressBox"> <div id="progressBar">0%</div> <div id="progressText">0%</div> </div> </body> </html>
相關文章
- jQuery進度條效果程式碼例項jQuery
- canvas水位進度效果程式碼例項Canvas
- jQuery動態進度條程式碼例項jQuery
- jQuery載入進度條例項程式碼jQuery
- jQuery 進度條效果程式碼jQuery
- javascript實現的帶有百分比的進度條效果JavaScript
- javascript模擬實現滾動條效果程式碼例項JavaScript
- JavaScript日曆效果程式碼例項JavaScript
- canvas環形百分比進度條效果Canvas
- js百分比載入進度條效果JS
- 美化滾動條效果程式碼例項
- JavaScript百分比動態進度條JavaScript
- css3實現的進度條程式碼例項CSSS3
- CSS3進度條效果程式碼CSSS3
- canvas百分比環形進度條程式碼Canvas
- canvas圓環百分比載入效果程式碼例項Canvas
- JavaScript點選投票效果程式碼例項JavaScript
- JavaScript留言板效果程式碼例項JavaScript
- javascript淡入淡出效果程式碼例項JavaScript
- JavaScript 動畫效果簡單例項程式碼JavaScript動畫單例
- JavaScript多級選項卡效果程式碼例項JavaScript
- JavaScript 動態進度條效果詳解JavaScript
- javascript實現animate()動畫效果程式碼例項JavaScript動畫
- JavaScript網頁鎖屏效果程式碼例項JavaScript網頁
- javascript元素迴圈插入效果程式碼例項JavaScript
- javascript計算字串長度程式碼例項JavaScript字串
- javascript元素內容漸現效果程式碼例項JavaScript
- javascript模擬實現ArrayList效果程式碼例項JavaScript
- JavaScript簡單的日曆效果程式碼例項JavaScript
- Js 百分比進度條JS
- js實現圓環百分比載入等待效果程式碼例項JS
- css進行中打點效果程式碼例項CSS
- javascript元素透明度漸變效果程式碼例項JavaScript
- javascript元素滑鼠跟隨效果程式碼例項詳解JavaScript
- javascript元素3D旋轉效果程式碼例項JavaScript3D
- javascript實現的淡入淡出效果程式碼例項JavaScript
- javascript實現的燃放煙火效果程式碼例項JavaScript
- JavaScript跟隨滑鼠指標的粒子效果程式碼例項JavaScript指標