动态页面加载进度条

最新推荐文章于 2022-10-26 09:32:52 发布
最新推荐文章于 2022-10-26 09:32:52 发布
阅读量763 收藏
点赞数
分类专栏： Java Web 文章标签： image function border javascript class url

动态页面加载进度条

将以下部分添加到<head>和</head>之间

<style type="text/css">

<!--

.p {  font-family: "MS Shell Dlg"; font-size: 12px}

-->

</style>

<script language="javascript">

function LoadFinish(){

　　document.all('LoadProcess').style.visibility = "hidden";

}

</script>

将以下部分添加到页面中即可

<body οnlοad="LoadFinish()" οncοntextmenu="window.event.returnValue=false" οndragstart="window.event.returnValue=false" onselectstart="event.returnValue=false">

<div id="LoadProcess" style="position:absolute; left:35%; top:111px; width:200px; height:28px; z-index:1; visibility: visible" class="font12"> 

  <table width="100%" border="0" cellspacing="1" cellpadding="5" height="26" class="font_12_a" bgcolor="#000000">

    <tr> 

      <td align="center" bgcolor="#FFFFFF">

        <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>

      </td>

    </tr>

  </table>

</div>

另一个页面加载进度条

<HTML>

<TITLE>loadpage</TITLE>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<style type="text/css">

<!--

.unnamed1 {  background-color: #000000}

-->

</style>

</head>

<body>

<table border=0 cellpadding=0 cellspacing=0 width="100%" height="100%">

<tr>

<form name=loading>

      <td align=center>

        <p align="center">&nbsp;</p>

        <p align="center"><font color="#00FF00" size="2"></font></p>

        <p>

          <input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder;

color:#00FF00; background-color:black; padding:0px; border-style:none;">

          <br>

          <br>

          <input type=text name=percent size=46 style="font-family:Arial; color:#00FF00;

text-align:center; border-width:medium; border-style:none;" class="unnamed1">

          <br>

          <br>

          <font color="#00FF00" size="2" >

          <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

{

alert("载入完毕")

window.location = "http://www.csdn.net";

}

}

</script>

          <noscript></noscript></font></p>

                  </td>

<!--//-->

</form>

</tr>

</table>

</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>

 

网页代码：让用户等待若干秒才能点的表单按钮，页面读取进度条脚本.....

我先来一个：  

oracle_basic 让用户等待若干秒才能点的表单按钮。  

 

<FORM  name=sform  action=reg_2.asp  method=post><INPUT  class=input  type=submit  value="我同意"  name=submitbtn></FORM>  

 

<SCRIPT  language=javascript>  

<!--  

var  secs  =  15;  

var  wait  =  secs  *  1000;  

document.sform.submitbtn.disabled=true;  

   

for(i=1;i<=secs;i++)  {  

 window.setTimeout("update("  +  i  +  ")",  i  *  1000);  

}  

 

window.setTimeout("timer()",  wait);  

 

function  update(num)  {  

 if(num  ==  (wait/1000))  {  

   document.sform.submitbtn.value  =  "我同意";  

 }  

 else  {  

   printnr  =  (wait/1000)-num;  

   document.sform.submitbtn.value  =  "请先阅读服务条款  (剩余时间"  +  printnr  +  ")";  

 }  

}  

 

function  timer()  {  

 document.sform.submitbtn.disabled=false;  

}  

//-->  

</SCRIPT>  

---------------------------------------------------------------  

 

页面读取进度条脚本  

 

复制代码到head  

 

 

<style  type="text/css">  

/*  Container  of  Loader  */  

#seLoader  

{  

           width  :  200px;  /*  set  width  of  loader  */  

           z-index  :  1;  

           margin  :  auto;  

}  

 

/*  Box  around  loadbar  */  

#seLoadBox  

{  

           height  :  12px;  /*  set  height  */  

           z-index  :  3;  

           border  :  1px  solid;  

           padding  :  1px;  

           background-color  :  #efefef;  

           font-size  :  0px;  

           text-align  :  left;  

}  

 

/*  loadbar  */  

#seLoadBar  

{  

           width  :  0%;  

           height  :  100%;  

           z-index  :  4;  

           background  :  #f90;  

}  

 

/*  text  (%)  */  

#seLoadTxt  

{  

           z-index  :  5;  

           margin-top  :  -14px;  

           font  :  10px  Verdana,Geneva,sans-serif;  

}  

</style>  

<script  src="seLoader.js"  type="text/javascript"></script>  

<script  type="text/javascript">  

load  =  new  seLoader('img/')  //  make  loader  object  and  set  the  directory  (dir  optional)  

load.runAtEnd('setTimeout(\'viewPage()\',10)')  //  run  a  script  after  loading  (optional)  

load.setImgs  //  set  the  images  

(  

           'Image1.gif','Image2.gif','Image3.gif','Image4.gif','Image5.gif','Image6.gif','Image7.gif',  

           'Image8.gif','Image9.gif','Image10.gif','Image11.gif','Image12.gif','Image13.gif','Image14.gif','Image15.gif',  

               'Image16.gif','Image17.gif','Image18.gif','Image19.gif'  

)  

 

function  viewPage()  

{  

           location.replace('http://www.ceocio.net')  

}  

 

function  initLoader()  

{  

           load.load()  

}  

οnlοad=initLoader  

</script>  

 

 

注明：  

 

前半部分是设定进度条的颜色和规格  

 

 

load  =  new  seLoader('img/')  //  make  loader  object  and  set  the  directory  (dir  optional)  

 

这里是设定读取图片的位置  

 

 

(  

           'Image1.gif','Image2.gif','Image3.gif','Image4.gif','Image5.gif','Image6.gif','Image7.gif',  

           'Image8.gif','Image9.gif','Image10.gif','Image11.gif','Image12.gif','Image13.gif','Image14.gif','Image15.gif',  

               'Image16.gif','Image17.gif','Image18.gif','Image19.gif'  

)  

 

这里是读取图片的名字  

 

 

 

复制代码到body  

 

 

<div  align="center">  

<script>load.drawLoader('now  loading...')</script>  

</div>

如果可以我愿争取
关注
专栏目录
JavaScript实现载入页面进度条
SANGLIU的专栏
03-25 3806
载入中，请稍等... var bar=0                var line="||" var amount="||" count()                  function count(){ bar=bar+2 amount =amount + line document.loading.chart.value=amoun
页面加载时，添加进度条，提高用户体验
qq_36584352的博客
03-22 2561
这几个月做了个项目，在此对一些问题做一个记录。 项目是前后端分离的，前端用的 npm+webpack。 问题：由于系统某页面数据量过大或网络较差等原因，导致页面还未完全加载出来，但按钮已被加载时（js还未就绪），点击按钮会报错。 根据系统情况，解决方案：每个页面加载的时候，在header上方加一个动态的进度条，同时通过css样式在页面上覆盖一个透明的背景，使页面在加载完成前不可点击。页面完全...
Vue项目页面跳转时候的，浏览器窗口上方的进度条显示
木槿之夏
01-19 439
1.安装 cnpm install --save nprogress 2.在router.js中引入Nprogress import NProgress from 'nprogress' import 'nprogress/nprogress.css'// nprogress样式文件 3.4.绑定路由钩子 我们想要的效果是：当路由开始跳转时加载进度条，当路由跳转完毕时进度条加载完毕。幸运的是...
js 原创 跳转页面进度条.
04-26
js 原创 跳转页面进度条.
window.location.href页面跳转的用法（区别于redirect）
10-25
window.location.href页面跳转的用法（区别于redirect）
jquery动态页面加载进度条
06-10
"jquery动态页面加载进度条"就是一种优化用户体验的工具，它通过在页面加载过程中展示一个直观的进度条，让用户知道页面正在加载并估计加载完成的时间，从而减少用户的等待焦虑感。这个插件基于JavaScript库jQuery...
网页加载进度条详解（推荐）
09-28
网页加载进度条是一种增强用户体验的视觉反馈机制，尤其是在网页内容较多、加载时间较长的情况下。它通过模拟加载过程，向用户展示页面正在逐步加载的状态，避免用户因长时间等待而感到不安。本文将深入探讨如何实现...
vue 页面加载进度条组件实例
08-28
Vue 页面加载进度条组件实例 本文主要讲解了如何实现 Vue 中的页面加载进度条组件实例，通过模拟进度条来提高用户体验。下面是本文中所涉及到的知识点： 1. Vue 组件的基本结构：在上面的代码中，我们可以看到 Vue...
页面加载进度条
03-16
页面加载进度条是一种常见的用户体验设计元素，特别是在网页和应用程序中，它向用户显示了页面内容正在加载的过程。这种视觉反馈可以提升用户体验，因为用户能够清楚地看到页面正在逐步加载，而不是面对一片空白屏幕...
微信内置的浏览器中window.location.href 跳转失败问题
qq_34036636的博客
08-16 4553
在移动wap中，经常会使用window.location.href去跳转页面，这个方法在绝大多数浏览器中都不会  存在问题，在做项目时遇到问题：在安卓手机的微信自带浏览器中，这个是失效的，并没有跳转； 原来的代码： window.location.href="SignView.jsp?sceneId="+$('#sceneId').val(); 这段代码在安卓手机的微信自带
css样式实现一个进度条
水痕
04-04 8455
效果如图代码<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords"
遇到问题-----JS中设置window.location.href跳转无效
qq_25236381的博客
11-18 707
http://blog.csdn.net/zzq900503/article/details/50879278
window.location.href的用法
热门推荐
风火一回，一生不毁
06-23 1万+
window.location.href:"url",在本页跳转到url所指的链接 window.location.replace:"url",用新的url替换原先的路径 window.location.reload(),强制刷新页面，重新向服务端发送请求 location.href:"url",在本页跳转到链接地址 parent.location.href:"url",跳转到上一
java进度条_Java实现进度条开发过程
weixin_35738304的博客
02-12 2079
首先说流程:1.访问启动任务servlet2.启动任务servlet开启任务,并跳转掉进度条展示页面3.页面就绪就调用(进度参数获取servlet),此后进度条展示页面定时调用,直到传递过来为100%.4.获取参数servlet从session中取出任务,并获取任务中的进度参数.返回进度参数给进度展示页面.一下是各个文件代码，工程为web工程。1.进度条schedule.css文件:body{m...
css 动态加载进度条，从左向右动态展示
最新发布
Y_Cfeng的博客
10-26 997
css 动态加载进度条，从左向右动态展示
jq小功能 点击按钮加载进度条
weixin_44159890的博客
09-25 1443
*本人小白 *点击按钮加载进度条 *直接上代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="./js/jquery.min.js" type="...
JavaScript实现动态加载进度条的Bootstrap示例
`window.onload`事件监听器确保在页面加载完成后立即调用`setProcess()`函数，开始初始化进度条。这个简单的例子展示了如何使用JavaScript动态更新HTML元素，以及如何利用定时器控制进度显示的动画效果。 通过这段...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值