[英]Increase Div Width with Javascript setTimeout()
我们如何使用setTimeout()增加或减小DIV的宽度?
setTimeout(function() { document.getElementById('foo').style.width = '300px' },
2000);
a related blog and spec: 相关博客和规范:
http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/ http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/
https://developer.mozilla.org/en/DOM/window.setTimeout https://developer.mozilla.org/en/DOM/window.setTimeout
If you want to increase or decrease first by getting the current width, then you can look into clientWidth(): 如果要首先通过获取当前宽度来增加或减少,则可以查看clientWidth():
https://developer.mozilla.org/en/DOM/element.clientWidth https://developer.mozilla.org/en/DOM/element.clientWidth
or use jQuery's width(): 或使用jQuery的width():
http://api.jquery.com/width/ http://api.jquery.com/width/
jQuery is becoming very popular and even used by big corporations, so you can consider using it. jQuery变得非常流行,甚至被大公司使用,因此您可以考虑使用它。
<div id="progressbar" style="background-color:green; margin-top: 10px; width:0px; height:10px;"></div>
<script>
// set var to rep width of progress bar div
var dwidth=0;
// declare global variable for instance of Interval Timer so other funcs can access it.
IntervalId =0;
// grow progress bar each second
IntervalId = setInterval(function() { dwidth +=5; document.getElementById('progressbar').style.width = dwidth+'px';}, 1000);
// stop progress bar after 10 seconds
/* in real world an event handler would do this when iframe handling upload script loads response from upload */
setTimeout(function() { clearInterval ( IntervalId ); document.getElementById('progressbar').style.display='none' , 10000);
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.