JavaScript 進(jìn)度條實(shí)現(xiàn)代碼(Firefox等相似瀏覽器下不支持)
更新時(shí)間:2009年07月21日 23:05:35 作者:
JavaScript實(shí)現(xiàn)的進(jìn)度條,可惜在Firefox等相似瀏覽器下不支持(遠(yuǎn)程)
復(fù)制代碼 代碼如下:
[code]
<script type="text/javascript">
var loading = {
element: null,
count: 0,
ID: 0,
createLoading: function(parent, width, height){ //用于生成外圍的進(jìn)度條框
loading.element = document.createElement("div");
loading.element.id = "loading";
loading.element.className = "loading";
loading.element.style.height = height;
loading.element.style.backgroundColor = "#ffffff";
loading.element.style.border = "1px solid #333333";
loading.element.style.width = width;
parent.appendChild(loading.element);
loading.interval();
},
addSubDIV: function(){ //用setInterval添加外圍框內(nèi)的div標(biāo)簽實(shí)現(xiàn)進(jìn)度效果
//如果達(dá)到外圍框的寬度,則重新顯示進(jìn)度
if ((loading.count + 1) * 2 >= parseInt(loading.element.style.width)) {
loading.count = 0;
clearInterval(loading.ID);
loading.element.innerHTML = "";
loading.interval();
}
else {
var elem = document.createElement("div");
elem.className= sub-loading ;
elem.style.backgroundColor = "#f00";
elem.style.width = "2px";
elem.style.height = loading.element.style.height;
elem.style.display="inline";
loading.element.appendChild(elem);
loading.count++;
}
},
interval: function(){ //反復(fù)調(diào)用
loading.ID = setInterval(loading.addSubDIV, 30);
}
}
onload = function(){
loading.createLoading(document.getElementById("parent"), "402px", "15px");
}
</script>
[/code]
運(yùn)行演示代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
相關(guān)文章
js 獲取頁(yè)面高度和寬度兼容 ie firefox chrome等
這篇文章主要介紹了js如何獲取頁(yè)面高度和寬度并且兼容ie firefox chrome等主流瀏覽器2014-05-05js獲取元素到文檔區(qū)域document的(橫向、縱向)坐標(biāo)的兩種方法
獲取頁(yè)面中元素到文檔區(qū)域document的橫向、縱向坐標(biāo),在js控制元素運(yùn)動(dòng)的過(guò)程中,對(duì)于頁(yè)面元素坐標(biāo)位置的獲取是經(jīng)常用到的,這里主要總結(jié)下兩種方法2013-05-05javascript設(shè)計(jì)模式 – 工廠模式原理與應(yīng)用實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 工廠模式,結(jié)合實(shí)例形式分析了javascript工廠模式基本概念、原理、定義、應(yīng)用場(chǎng)景及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-04-04微信小程序點(diǎn)擊頂部導(dǎo)航欄切換樣式代碼實(shí)例
這篇文章主要介紹了微信小程序點(diǎn)擊頂部導(dǎo)航欄切換樣式代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11小程序自定義單頁(yè)面、全局導(dǎo)航欄的實(shí)現(xiàn)代碼
這篇文章主要介紹了小程序自定義單頁(yè)面、全局導(dǎo)航欄的實(shí)現(xiàn)代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03Javascript實(shí)現(xiàn)基本運(yùn)算器
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)基本運(yùn)算器的相關(guān)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07用POSTMAN發(fā)送JSON格式的POST請(qǐng)求示例
這篇文章主要介紹了用POSTMAN發(fā)送JSON格式的POST請(qǐng)求示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09