纯HTML脚本实现页面加载进度效果
开发WEB应用时，如果打开的页面要加载的数据比较多，或是查询事件涉及的数据量比较大，且处理逻辑比较复杂的时候，为页面添加loading效果，可以让用户忍耐加载时间，让用户获得更好的体验效果。下面是一个使用简单JS脚本实现的网页页面加载显示效果，没有图片和外部类库，使用时请根据页面载入时间设置loading效果显示的时间。
<html>
<head>
<title>CODETC.COM-正在载入...</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</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;">
</p>
</td>
</form></tr>
</table>
<script type="text/javascript">
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.codeae.com/";
}
}
</script>
</body>
</html>http://www.codetc.com/article-162-1.html
页:
[1]