Loading页的实现代码

最新推荐文章于 2023-02-08 00:00:00 发布

转载最新推荐文章于 2023-02-08 00:00:00 发布 · 139 阅读

·

0

·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mgod/archive/2007/04/23/724286.html

文章标签：

#javascript #ViewUI

本文分享了一种在网页加载过程中使用的遮罩与动画效果实现方案，通过JavaScript动态生成进度条，配合颜色渐变，为用户提供良好的等待体验。此外，还介绍了如何在加载完毕后无缝跳转至目标页面的方法。

用了几种Loading页的代码，还是算这个好用了。真的佩服牛人们的思想。有的说用DIV来实现遮盖后面的东西，当FORM加载完后，执行CLOSE()d的JS函数。我试验了几次，效果不是那么好。也主要是由于我吧东西都放在我本地，感觉不到速度的差异吧。下面我给出我用到的那段代码，如果朋友需要的话，就拿去用吧！

<script language="JavaScript">

<!--

var url = 'http://127.0.0.1';

//这里就是要跳到的地方

//-->

</script>

<title>网站数据加载中……</title>

</head>

<body onLoad="location.href = url">

<div style='margin-top:40;margin-left:40;margin-right:0'>

<p> </p>

<p align="center"> </p>

<p align="center"> </p>

<p align="center">

<style>

<!--.proccess{

}{border:0px solid; border-color:#009900; width:2;height:15;background:eeeeee;margin:0}--></style>

</p>

<div style='margin-top:-20;margin-left:0;margin-right:0' align="center">

<form method=post name=proccess>

<script language=javascript>

document.write("<br><br><br><br><table border=0 cellspacing=1 cellpadding=0 bgcolor=#000000 ><tr bgcolor=#ffffff><td style='font:9pt Verdana;'>")

for(i=0;i<200;i++)document.write("<input class=proccess >")

document.write("</td></tr></table><br>")

document.write("<div align=center style='font-size:9pt;color:#660000;'>Loading……,Please Wait!</div>")

</script>

</form>

</div>

<div align="center">

<script language=JavaScript>

<!--

var p=0,j=0;

var c=new Array("#FF6600","#ffffff")

setInterval('proccess();',100)

function proccess()

{

document.forms.proccess.elements[p].style.background=c[j];

p+=1;

if(p==200)

{p=0;j=1-j;}}

--></script>

</div>

</div>

<div align="center">

<script>

<!--

if (document.layers)

document.write('<Layer src="' + url + ' " VISIBILITY="hide"> </Layer>');

else if (document.all || document.getElementById)

document.write('<iframe src="' + url + '" style="visibility: hidden;"></iframe>');

else location.href = url;

//-->

</script>

</div>

</body>

转载于:https://www.cnblogs.com/mgod/archive/2007/04/23/724286.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。