直接拿來(lái)用的頁(yè)面跳轉(zhuǎn)進(jìn)度條JS實(shí)現(xiàn)
本文實(shí)例介紹了基于javascript實(shí)現(xiàn)的頁(yè)面跳轉(zhuǎn)進(jìn)度條,分享給大家供大家參考,具體內(nèi)容如下
效果圖:
具體代碼:
<HTML> <HEAD> <TITLE>open代碼</TITLE> <SCRIPT type=text/javascript> <!-- var ie5 = (document.all && document.getElementsByTagName); var step = 0; function setSB(v, el, inforEl, message) { if (ie5 || document.readyState == "complete") { filterEl = el.children[0]; valueEl = el.children[1]; if (filterEl.style.pixelWidth > 0) { var filterBackup = filterEl.style.filter; filterEl.style.filter = ""; filterEl.style.filter = filterBackup; } filterEl.style.width = v + "%"; valueEl.innerText = v + "%"; inforEl.innerText = message; } } function setSBByStep(v, el, inforEl, message) { if (ie5 || document.readyState == "complete") { step = step + v; filterEl = el.children[0]; valueEl = el.children[1]; if (filterEl.style.pixelWidth > 0) { var filterBackup = filterEl.style.filter; filterEl.style.filter = ""; filterEl.style.filter = filterBackup; } filterEl.style.width = step + "%"; valueEl.innerText = step + "%" inforEl.innerText = message; } } function fakeProgress(v, el) { if (v >= 101) location.href="http://www.dbjr.com.cn"; else { setSB(v, el, infor, "頁(yè)面正在跳轉(zhuǎn)中,請(qǐng)稍候..."); window.setTimeout("fakeProgress(" + (v + 1) + ", document.all['" + el.id + "'])", 10); } } //--> </SCRIPT> <SCRIPT language=javaScript> </SCRIPT> </HEAD> <BODY bgColor=#f9f9f9 topMargin=100 onload=fakeProgress(0,sb)> <P> </P> <P> </P> <P> </P> <!-- Status Bar Starts --> <DIV align=center> <DIV id=sb style="BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BACKGROUND: #99ccff; BORDER-LEFT: medium none; WIDTH: 400px; BORDER-BOTTOM: #cccccc 1px solid; HEIGHT: 14px; TEXT-ALIGN: left"> <DIV id=sbChild1 style="FILTER: Alpha(Opacity=0, FinishOpacity=80, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); OVERFLOW: hidden; WIDTH: 100%; POSITION: absolute; HEIGHT: 12px"> <DIV style="BACKGROUND: #000000; WIDTH: 100%" ;height:12px; overflow: hidden></DIV> </DIV> <DIV style="FONT-SIZE: 10px; WIDTH: 400px; COLOR: white; FONT-FAMILY: arial; POSITION: absolute; HEIGHT: 14px; TEXT-ALIGN: center"></DIV> </DIV> <!-- Status Bar Ends --> <P></P> <DIV id=infor style="FONT-SIZE: 11px; WIDTH: 100%; COLOR: #999999; FONT-FAMILY: arial; POSITION: relative; HEIGHT: 14px; TEXT-ALIGN: center"></DIV> </DIV> </BODY> </HTML>
代碼二,也很不錯(cuò),運(yùn)行效果圖如下
代碼分享:
<html> <head> <script language="javascript"> function setSB(v, el) { var ie5 = (document.all && document.getElementsByTagName); if (ie5 || document.readyState == "complete") { filterEl = el.children[0]; valueEl = el.children[1]; filterEl.style.width = v + "%"; valueEl.innerText = v + "%"; } } function fakeProgress(v, el) { if (v > 100) location.href = "http://www.dbjr.com.cn/"; else { setSB(v, el); window.setTimeout("fakeProgress(" + (++v) + ", document.all['" + el.id + "'])", 20); } } </SCRIPT> </head> <body onload="fakeProgress(0, sb)" topmargin=180 bgcolor=#CCCCCC> <center> <p align=center style="font-szie:9pt; line-height: 100%">正在進(jìn)入腳本之家,請(qǐng)稍侯……</p> <span id=sb style="width: 500px"> <div style="filter: Alpha(Opacity=0, FinishOpacity=60, style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); width: 0%; height: 12px; position: absolute; background: #9999ff"></div> <div style="font-size: 12px; width: 100%; color: #ff3333; font-family: arial; text-align: center"></DIV> </span> </center> </body> </html>
代碼直接復(fù)制粘貼即可運(yùn)行,大家可以試驗(yàn)一下。
以上就是為大家分享的JS實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)進(jìn)度條的完整代碼,希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
html+js實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器代碼(加減乘除)
下面小編就為大家?guī)?lái)一篇html+js實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器代碼(加減乘除)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07js實(shí)現(xiàn)簡(jiǎn)單div拖拽功能實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)單div拖拽功能的方法,實(shí)例分析了javascript針對(duì)div層拖拽的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-05-05多個(gè)js毫秒倒計(jì)時(shí)同時(shí)進(jìn)行效果
這篇文章主要以實(shí)例的方式講解多個(gè)js毫秒倒計(jì)時(shí)同時(shí)進(jìn)行效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01JS簡(jiǎn)單實(shí)現(xiàn)獲取元素的封裝操作示例
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)獲取元素的封裝操作,結(jié)合實(shí)例形式分析了JS針對(duì)頁(yè)面ID、class、TAG元素獲取的函數(shù)與對(duì)象封裝操作實(shí)現(xiàn)方法,需要的朋友可以參考下2017-04-04微信小程序開(kāi)發(fā)之map地圖組件定位并手動(dòng)修改位置偏差
這篇文章主要介紹了微信小程序開(kāi)發(fā)之map地圖組件,定位,并手動(dòng)修改位置偏差,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08Bootstrap 響應(yīng)式實(shí)用工具實(shí)例詳解
Bootstrap 提供了一些輔助類(lèi),以便更快地實(shí)現(xiàn)對(duì)移動(dòng)設(shè)備友好的開(kāi)發(fā)。這些可以通過(guò)媒體查詢(xún)結(jié)合大型、小型和中型設(shè)備,實(shí)現(xiàn)內(nèi)容對(duì)設(shè)備的顯示和隱藏。下面通過(guò)本文給大家分享Bootstrap 響應(yīng)式實(shí)用工具,一起看看吧2017-03-03