-
<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.
更多推荐
发布评论