模拟进度条，Js代码

2024-09-05 12:18:26

字体：大中小

来源：转载

供稿：网友

JavaScript代码模拟实现进度条，根据网页加载的进度，进度条由左向右移动变化，全部变成蓝色则加载完成，在以前，好多喜欢个性化定制网页的朋友，都会在自己的网页内放上加载进度条，目前来说，用的不多了。

<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 id="baranchor" style="position:relative;width:200px;height:20px;visibility:hidden;">')document.write('<div id="barbackground" style="width:200px;height:20px;z-index:9"></div>')document.write('<div 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>

上一篇：自定义的网页滚动条，InitScrollBar滚动条

下一篇：鼠标移入改变样式，鼠标移出恢复

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注