Internet Explorer呈现问题（简单JS定时器

Internet Explorer呈现问题（简单JS定时器 - window.setTimeout）(Internet Explorer render issue (simple JS timer - window.setTimeout)) <script language="JavaScript" type="text/javascript"> var theBar = createProgressBar(document.getElementById('progress-bar')); var value; function resetValue() { value = 0; } function showProgress() { value += 1; theBar.setValue(value); if (value < 100) { window.setTimeout(showProgress, 100); } } window.onload=resetValue();showProgress(); </script>

-

<script language="JavaScript" type="text/javascript"> function createProgressBar(elem) { var div1 = document.createElement('DIV'); div1.className = 'progress-bar-background'; div1.style.height = elem.offsetHeight + 'px'; elem.appendChild(div1); var div2 = document.createElement('DIV'); div2.className = 'progress-bar-complete'; div2.style.height = elem.offsetHeight + 'px'; div2.style.top = '-' + elem.offsetHeight + 'px'; elem.appendChild(div2); return { div1 : div1, div2 : div2, setValue : function(v) { this.div2.style.width = v + '%'; } } } </script>

-

div.field input{ height: 45px; width: 270px; font-size: 24px; } .progress-bar-background { background-color: #D0D0D0; width: 100%; position: relative; overflow:hidden; top: 0; left: 0; } .progress-bar-complete { background-color: green; width: 50%; position: relative; overflow:hidden; top: -12px; left: 0; } #progress-bar { width: auto; height: 10px;; overflow:hidden; border: 0px black solid; }

-

这段代码完全可以在Chromer，Safari和FireFox下运行。

唯一的问题是使用Internet Explorer。

它似乎呈现为“半满”并且不会执行任何操作。

由于我不熟悉JS，我不知道要开始寻找什么。

希望有一些小菜友好的建议。

<script language="JavaScript" type="text/javascript"> var theBar = createProgressBar(document.getElementById('progress-bar')); var value; function resetValue() { value = 0; } function showProgress() { value += 1; theBar.setValue(value); if (value < 100) { window.setTimeout(showProgress, 100); } } window.onload=resetValue();showProgress(); </script>

--

<script language="JavaScript" type="text/javascript"> function createProgressBar(elem) { var div1 = document.createElement('DIV'); div1.className = 'progress-bar-background'; div1.style.height = elem.offsetHeight + 'px'; elem.appendChild(div1); var div2 = document.createElement('DIV'); div2.className = 'progress-bar-complete'; div2.style.height = elem.offsetHeight + 'px'; div2.style.top = '-' + elem.offsetHeight + 'px'; elem.appendChild(div2); return { div1 : div1, div2 : div2, setValue : function(v) { this.div2.style.width = v + '%'; } } } </script>

--

div.field input{ height: 45px; width: 270px; font-size: 24px; } .progress-bar-background { background-color: #D0D0D0; width: 100%; position: relative; overflow:hidden; top: 0; left: 0; } .progress-bar-complete { background-color: green; width: 50%; position: relative; overflow:hidden; top: -12px; left: 0; } #progress-bar { width: auto; height: 10px;; overflow:hidden; border: 0px black solid; }

--

This snippet works perfectly under Chromer, Safari and FireFox.

The only issue is with Internet Explorer.

It seems to render as "half-full" and doesn`t execute anything.

Since I`m not that familiar with JS I have no clue what to start looking for.

Would appreciate some noob friendly advice.

最满意答案

改变这个......

window.onload=resetValue();showProgress();

对此...

window.onload = function() {
  createProgressBar();      
  resetValue();
  showProgress();
};
 
 你应该没问题。 
 
 记住......“window.onload”是Window对象的一个​​属性，这个属性的值应该是一个函数，一旦浏览器加载了整个DOM 和所有内容（图像，css， js等） 
 
 然而，这不是一个很好的执行你的东西的地方 - 你应该使用事件“onContentLoaded”，但由于它不是跨浏览器统一支持的 - 你应该使用JavaScript库，例如jQuery或Prototype或MooTools。 
 
 但是 - 当然，如果你是JS的新手 - 不要为了获得使用这些库的乐趣而跳过它 - 首先要了解JavaScript是什么以及如何与浏览器搭配不兼容 - 只有这样你才能体会到这些图书馆的全部潜力。 
change this...
 
window.onload=resetValue();showProgress();
 
to this...
 
window.onload = function() {
  createProgressBar();      
  resetValue();
  showProgress();
};
 
and you should be fine.
 
Remember... "window.onload" is a property of the Window object ... and the value of this property should be a function that will execute automatically once the browser has loaded the entire DOM AND all the content (images, css, js, etc.)
 
This a NOT a good place to execute your stuff however -- you should use the event "onContentLoaded" but since it is not uniformly supported across browsers -- you should use a JavaScript library such as jQuery or Prototype or MooTools instead.
 
BUT -- of course if you're new to JS -- do NOT skim over it in order to get the pleasure of using these libs -- first get the real taste of what JavaScript is and what it is like to juggle with the browser incompatibilities -- only then you'll be able to appreciate the full potential of these libraries.