JS网页加载进度条

最新推荐文章于 2023-04-26 22:06:36 发布

lishushan

最新推荐文章于 2023-04-26 22:06:36 发布

阅读量76

点赞数

分类专栏： JavaScript 文章标签： JavaScript Cache CSS HTML .net ViewUI

本文链接：https://blog.csdn.net/lishushan/article/details/83529102

版权

JavaScript 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

<html> 
<head>
<title>JS网页加载进度条</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
</head>
<body> 
<script language="javascript">
window.οnlοad=function(){ 
var a = document.getElementById("loading"); 
a.parentNode.removeChild(a); 
}
document.write('<div id="loading" style="background:#FF0000;color:#FFFFFF;width:170px;">正在读取，请稍候……</div>'); 
</script>
<!--把下面代码改为您的网页内容-->
<iframe src="http://www.zzsky.cn" width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0"></iframe>
</body>
</html>

另一个：

<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
<title>预加载中....</title>
<style type="text/css">
<!--
.p { font-family: "MS Shell Dlg"; font-size: 12px}
-->
</style>
</head>
<body onLoad="location.href = url" οncοntextmenu="window.event.returnValue=false" οndragstart="window.event.returnValue=false" onselectstart="event.returnValue=false">
<script language="JavaScript">
<!--
var url = 'http://www.niudun.com'; 
function jump(){
location=url;
return true;
}
//-->
</script>
<div align="center">
<center>
<table border="1" cellpadding="0" cellspacing="0" width="401" bordercolorlight="#808080" bordercolordark="#FFFFFF">
    <tr>
      <td bgcolor="#F5F5F5" width="402"> <div id=process style="width: 400; height: 10"> </div>
<script>
var num=0;
function mypro()
{
num++;
process.innerHTML=process.innerHTML+'<font color="#0000FF">■</font>';
if(num<26){setTimeout("mypro()",200);}else{process.innerHTML="";num=0;mypro()}
}
mypro();
</script>
</td> <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>
</tr>
</table>
</center>
</div>
<p align="center"><font class="p"><b>网站正在装载中，请稍候......</b></font></p>
</body>
</html>


、、、、、、、、、、、、、、、、、、、、、、




<form onSubmit="javascript:pop_progressBar();"> 

function pop_progressBar() 
{ 
opopup=window.createPopup(); 
var bHtml='<img src="images/loading.gif" width="429" height="203">'; 
bHtml+='<br>'; 
bHtml+='<div id="progressBar" align="center"><font color="blue">正在查询中候...</font></div>'; 
opopup.document.body.innerHTML=bHtml; 
opopup.show(screen.width/3,screen.height/3,429,238,document.body); 
} 

其中loading.gif自己制作或者找一个图片


、、、、、、、、、、、、、、、、、、、、、、、、、

<!-- 要实现此效果需要 1 个步骤： -->

<!-- 第 1 步： -->
<!-- 把下面的代码加到<BODY></BODY>区域中： -->

<form name=loading> 
<p align=center> <font color="#0066ff" size="2" face="Arial">载入中，请稍等...</font><br> 
<input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none;"> 
<br> 
<input type=text name=percent size=47 style="color:#0066ff; 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.webasp.net";} 
}</script> 
</p> 
</form>