基于javascript實現(xiàn)頁面加載loading效果

更新時間：2020年09月15日 17:08:09 作者：填坑女俠

這篇文章主要為大家詳細(xì)介紹了基于javascript實現(xiàn)頁面加載loading效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實為大家分享了javascript實現(xiàn)頁面加載loading效果，供大家參考，具體內(nèi)容如下

效果圖：

<html>
<head>
<title>正在載入</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0">
<table border=0 cellpadding=0 cellspacing=0 width="100%" height="100%">
<tr> 
<form name=loading>
<td align=center> 
<p><font color=gray>正在載入首頁，請稍候.</font></p>
<p> 
<input type=text name=chart size=46 style="font-family:Arial; 
font-weight:bolder; color:gray;
 background-color:white; padding:0px; border-style:none;">
<br>
<input type=text name=percent size=46 style="font-family:Arial; 
color:gray; text-align:center; 
border-width:medium; border-style:none;">
<script>var bar = 0 
var line = "||" 
var amount ="||" 
count() 
function count(){ 
bar= bar+2 
amount =amount + line 
document.loading.chart.value=amount 
document.loading.percent.value=bar+"%" 
if (bar<99) 
{setTimeout("count()",100);} 
else 
{window.location = "目標(biāo)頁";} 
}
</script>
</p>
</td>
</form>
</tr>
</table>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

uniapp使用webview嵌入vue頁面及通信實現(xiàn)方式
項目中有需要嵌入其他H5的頁面的業(yè)務(wù)需求,這篇文章主要給大家介紹了關(guān)于uniapp使用webview嵌入vue頁面及通信實現(xiàn)方式的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-01-01
js中調(diào)用微信的掃描二維碼功能的實現(xiàn)代碼
這篇文章主要介紹了在js中調(diào)用微信的掃描二維碼功能的實現(xiàn)代碼，本文給大家分享了注意事項及常見問題分析，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-04-04
微信小程序返回到頂部功能的簡單實現(xiàn)
在做微信小程序開發(fā)時,遇到一個問題,要如何實現(xiàn)返回頂部的功能,下面這篇文章主要給大家介紹了微信小程序返回到頂部功能的簡單實現(xiàn),文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
JavaScript 短路運算的實現(xiàn)
本文主要介紹了JavaScript 短路運算的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
js eval木馬代碼,以后再分析吧
js eval木馬代碼,以后再分析吧...
2007-03-03
JS實現(xiàn)的文字與圖片定時切換效果代碼
這篇文章主要介紹了JS實現(xiàn)的文字與圖片定時切換效果代碼,可實現(xiàn)定時切換及鼠標(biāo)點擊切換兩種效果,涉及JavaScript鼠標(biāo)事件控制頁面樣式的相關(guān)技巧,需要的朋友可以參考下
2015-10-10
JS實現(xiàn)網(wǎng)頁背景顏色與select框中顏色同時變化的方法
這篇文章主要介紹了JS實現(xiàn)網(wǎng)頁背景顏色與select框中顏色同時變化的方法,實例分析了javascript操作select及css樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
這篇文章主要介紹了JS實現(xiàn)點擊復(fù)選框?qū)粹o或文本框變?yōu)榛疑豢捎玫姆椒?涉及javascript動態(tài)修改頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08