`
liss
  • 浏览: 844407 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

JS网页加载进度条

JavaScriptCacheCSSHTML.net 
阅读更多 
<html> 
<head>
<title>JS网页加载进度条</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
</head>
<body> 
<script language="javascript">
window.onload=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" oncontextmenu="window.event.returnValue=false" ondragstart="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>

 

分享到：
| JavaScript进度条源码实例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    网页加载进度条插件MProgress.js.zip

    总之，MProgress.js是一个强大的网页加载进度条插件，它结合了Material Design的美观设计和JavaScript与CSS3的高效执行，为前端开发者提供了一种优雅的方式来显示页面加载进度。无论你是新手还是经验丰富的开发者，...

    JavaScript实现网页加载进度条代码超简单

    但是目前的浏览器并没有提供页面加载进度方面的接口，也就是说页面还无法准确返回页面实际加载的进度，本文中我们使用jQuery来实现页面加载进度条效果。 HTML 首先我们要知道的是，目前没有任何浏览器可以直接获取...

    仿微信网页加载进度条

    总的来说，仿微信网页加载进度条的设计与实现涉及到前端开发的基础知识，包括HTML布局、CSS美化以及JavaScript的事件监听和DOM操作。通过合理运用这些技术，我们可以为用户提供更加友好和直观的加载体验。

    13种CSS3网页加载进度条效果

    【标题】：“13种CSS3网页加载进度条效果” 在网页设计中，加载进度条是一种常见的用户体验元素，它能够向用户展示数据加载的进度，缓解用户等待时的焦虑感。CSS3作为现代Web设计的强大工具，提供了丰富的样式和...

    实用的网页加载进度条

    综上，"实用的网页加载进度条"资源包提供了一个可视化的网页加载指示器，它涉及到网页开发中的用户体验设计、JavaScript编程、CSS动画等多个技术层面，对于提升网页的互动性和专业性具有重要意义。

    Loading网页加载进度条动画效果.zip

    总结来说，"Loading网页加载进度条动画效果.zip"是一个结合了jQuery和CSS3技术的网页加载动画解决方案，它通过优雅的动画为用户提供了良好的等待体验，同时展示了JavaScript和CSS3在网页动态效果上的强大能力。...

    我制作了2款 显示网页加载进度的网页加载进度条.就是在网页最上面显示网页加载进度.zip_js实现加载条

    我制作了2款 显示网页加载进度的网页加载进度条.就是在网页最上面显示网页加载进度.zip

    html javascript js制作加载进度条.loading

    html js制作加载进度条.zip

    网页加载进度条pace插件.zip

    网页加载进度条Pace插件是提升用户体验的重要工具，它为用户提供了一个视觉反馈，表明页面正在加载，并且显示了加载的进度。这个压缩包“网页加载进度条pace插件.zip”包含了14种不同的样式，使得开发者可以根据网站...

    13种CSS3网页加载进度条.zip

    在本文中，我们将深入探讨如何使用CSS3来创建引人入胜且功能丰富的网页加载进度条。CSS3作为层叠样式表的最新版本，引入了许多强大的新特性，使得开发者能够构建更加动态和交互式的用户体验。结合JavaScript和jQuery...

    Android应用源码之加载网页进度条.zip

    在Android应用开发中，加载网页进度条是一种常见的用户体验优化手段，它可以帮助用户了解网页加载的状态，提高用户对应用的满意度。本源码分享的主题聚焦于如何在Android应用中实现这样一个功能，下面我们将深入探讨...

    js页面加载进度条

    JavaScript（简称JS）页面加载进度条是一种用户界面交互设计，用于提供可视化的页面加载状态，让用户了解网页内容的加载进度，提升用户体验。这种效果通常在大型应用或包含大量资源的网页中常见，因为它能平息用户的...

    80个GIF进度条,漂亮的动态加载进度条

    在网页设计和用户体验领域，动态加载进度条是一个重要的元素，它能够向用户显示数据或内容正在加载的过程，提高用户对系统响应的认知，并提供更舒适的等待体验。标题提到的"80个GIF进度条"是一套丰富的资源集合，...

    jQuery网页加载进度条插件

    总的来说，**jQuery网页加载进度条插件** 结合了pace.js的功能，为网页开发提供了一个强大的工具，能够优雅地处理页面加载过程，提高用户满意度。如果你在开发过程中遇到加载等待问题，这个插件会是一个非常实用的...

    Android 加载网页进度条.zip

    通过以上步骤，你就可以在Android应用中实现一个具有加载进度条的WebView了。这个功能对于提升用户体验至关重要，因为它让用户知道应用正在忙碌并给予加载过程的视觉反馈，降低了用户对等待时间的感知。同时，合理的...

    jQuery网页加载进度条动画特效.rar

    【jQuery网页加载进度条动画特效】是一个利用JavaScript库jQuery和CSS3技术实现的网页加载效果。这个特效在用户等待网页完全加载时，提供一个可视化的进度条，展示当前页面加载的进度，以此提升用户体验，让用户知道...

    网页加载进度条详解（推荐）

    网页加载进度条是一种增强用户体验的视觉反馈机制，尤其是在网页内容较多、加载时间较长的情况下。它通过模拟加载过程，向用户展示页面正在逐步加载的状态，避免用户因长时间等待而感到不安。本文将深入探讨如何实现...

Magicbox
Global site tag (gtag.js) - Google Analytics