進度條------小案例
阿新 • • 發佈：2018-11-05
computed absolut ack else eight abs style div html
很少會用到，簡單的寫一下
代碼如下：
<style type="text/css"> #box { width: 400px; height: 40px; border: 1px dashed #ccc; position: relative; } #div2 { width: 0; height: 40px; background-color: blue; } #div3 { position: absolute; right:-50px; top: 10px; } </style> <script> //獲取內部或外部樣式的屬性值 function getStyle(obj, att) { return obj.currentStyle ? obj.currentStyle[att] : getComputedStyle(obj, null)[att]; } window.onload = function () { var div2 = document.getElementById(‘div2‘); var div3 = document.getElementById(‘div3‘); var timer = null; var num = 0; //獲取div2的寬度值 //console.log(parseInt(getStyle(div2,‘width‘))); function show() { var _width = parseInt(getStyle(div2, ‘width‘));if (_width >= 400) { clearInterval(timer); } else { div2.style.width = _width + 4 + ‘px‘; div3.innerHTML = ++num + ‘%‘; } } show(); timer = setInterval(show, 50); }; </script> </head> <body> <div id="box"> <div id="div2"></div> <div id="div3"></div> </div> </body>
進度條------小案例