模擬進度條，Js代碼

2024-09-05 12:18:26

字體：大中小

供稿：網(wǎng)友

JavaScript代碼模擬實現(xiàn)進度條，根據(jù)網(wǎng)頁加載的進度，進度條由左向右移動變化，全部變成藍色則加載完成，在以前，好多喜歡個性化定制網(wǎng)頁的朋友，都會在自己的網(wǎng)頁內(nèi)放上加載進度條，目前來說，用的不多了。

<html><head><title>模擬進度條</title><style></style><script language="JavaScript1.2">//1) Set the duration for the progress bar to complete loading (in seconds)var duration=5//2) Set post action to carry out inside function below:function postaction(){//Example action could be to navigate to a URL, like following://window.location="http://www.sohu.com"}var clipright=0var widthIE=0var widthNS=0function initializebar(){if (document.all){baranchor.style.visibility="visible"widthIE=bar.style.pixelWidthstartIE=setInterval("increaseIE()",50)}if (document.layers){widthNS=document.baranchorNS.document.barbackgroundNS.clip.widthdocument.baranchorNS.document.barNS.clip.right=0document.baranchorNS.visibility="show"startNS=setInterval("increaseNS()",50)}}function increaseIE(){bar.style.clip="rect(0 "+clipright+" auto 0)"window.status="Loading..."if (clipright<widthIE)clipright=clipright+(widthIE/(duration*20))else{window.status=''clearInterval(startIE)postaction()}}function increaseNS(){if (clipright<202){window.status="Loading..."document.baranchorNS.document.barNS.clip.right=cliprightclipright=clipright+(widthNS/(duration*20))}else{window.status=''clearInterval(startNS)postaction()}}window.onload=initializebar</script></head><body><script language="JavaScript1.2">if (document.all){document.write('<div   class="iwvjtn8m0"   id="baranchor" style="position:relative;width:200px;height:20px;visibility:hidden;">')document.write('<div   class="iwvjtn8m0"   id="barbackground" style="width:200px;height:20px;z-index:9"></div>')document.write('<div   class="iwvjtn8m0"   id="bar" style="width:200px;height:20px;z-index:10"></div>')document.write('</div>')}</script><ilayer name="baranchorNS" visibility="hide" width=200 height=20><layer name="barbackgroundNS" bgcolor=black width=200 height=20 z-index=10 left=0 top=0></layer><layer name="barNS" bgcolor=blue width=200 height=20 z-index=11 left=0 top=0></layer></ilayer></body></html>

上一篇：自定義的網(wǎng)頁滾動條，InitScrollBar滾動條

下一篇：鼠標(biāo)移入改變樣式，鼠標(biāo)移出恢復(fù)