js实现页面loading效果_JavaScript

最新推荐文章于 2025-05-12 00:23:08 发布

weixin_30488085

最新推荐文章于 2025-05-12 00:23:08 发布

阅读量215

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/it560/archive/2009/11/24/1609137.html

本文提供了一种使用JavaScript实现页面加载时显示Loading效果的方法。通过动态更新文本框内容模拟加载进度，达到提示用户正在加载的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

it560给出js实现页面loading效果

Code
<html>
<head>
<title>正在载入

</title>
<FCK: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 = "http://www.it560.com/";}
}
</script>
</p>
</td>
</form>
</tr>
</table>
</body>
</html>

这里屏蔽代码运行了，可以从以下地址运行预览

http://www.it560.com/design/javascript/zMMDAwMDAwMjAzMw.html

做人要厚道,转载请注明文章出处 www.it560.com

转载于:https://www.cnblogs.com/it560/archive/2009/11/24/1609137.html