js网页加载进度条代码

js网页加载进度条代码
<script LANGUAGE="JAVASCRIPT">

var timerID=null;     <!--延时变量-->
var count=0;          <!--表示进度的循环变量-->
var running=false;    <!--是否正在进行格式化的标志量-->

function RandomNumber(max)        <!--用来产生随机数的函数-->
{var today = new Date();          <!--创建一个时间日期对象-->
  var num= Math.round((Math.abs(Math.sin(today.getTime()))*1000))%max+1;   <!--利用当前的时间日期值采取一定的算法产生随机数,其中的小数部分按四舍五入的规则进行处理-->
  return num;
}

function stopaction()                    <!--用来停止格式化操作的函数-->
{if (running)                            <!--如果正在格式化,则清除timerID延时操作-->
   clearTimeout(timerID);
 running=false;                          <!--将标志变量置为false-->
}

function startaction()                   <!--用来开始格式化操作的函数-->
{ stopaction();                          <!--停止格式化操作-->
  action();                              <!--格式化操作-->
}

function action()
{if (count!=100)                                                                  <!--如果格式化进度不到100,则显示已经完成的百分比-->
  { document.outputform.output.value="正在下载文件,目前进度:"+count+"%";
     count++;                                                                     <!--count加1-->
     timerID=setTimeout("action()",200+RandomNumber(500));                        <!--调用随机数产生函数计算并设定延时长度-->
     running=true;                                                                <!--标志量置为true-->
  }
  else
   { document.outputform.output.value="下载完毕 ......";                       <!--如果格式化进度为100,则显示格式化完毕-->
      stopaction();                                                               <!--停止-->
   }
}

</script>
<body onload="startaction()">

<form name="outputform">
  <p><input TYPE="TEXT" NAME="output" size="30"></p>
</form>

 

<!--本案例模拟了一个格式化硬盘的进度条功能-->
<!--格式化的进度是通过一个随机数计算得到的-->
<!--此随机数是根据一定的计算规则对当前系统的时间进行处理求得的-->
<!--当进度为100的时候表示格式化完成-->

时间: 2024-10-30 21:23:15

js网页加载进度条代码的相关文章

JS实现网页加载进度条实例

网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. HTML 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程.因此我们需要通过html代码逐行加载的特性,在整页代码的若干个跳跃行数中设置节点,进行大

jquery插件NProgress.js制作网页加载进度条

  这篇文章主要介绍了jquery插件NProgress.js制作网页加载进度条的相关资料,需要的朋友可以参考下 NProgress.js是极细的纳米级进度条,用现实的细线条动画让用户看到网页正在发生的事情! 你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现.其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见.不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现! NProgress.js应用于复杂网页的细长进度条.由 Googl

pace.js页面加载进度条插件_javascript技巧

本文简单介绍插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容IE8以上的所有主流插件,而且其强大之处在于,你还可以引入加载进度条的主题样式,你可以选择任意颜色和多种动画效果(例如简约.闪光灯,MAC OSX,左侧填充,顶部填充,计数器和弹跳等等动画效果),如果你擅长修改css动画,那你就可以做出无限种可能性的动画,为你的网站增添个性化特色! 调用方法: 引入Pace.j

浅析JS异步加载进度条_javascript技巧

展现效果: 1) 当点击Load的时候,模拟执行异步加载. 浏览器被遮挡. 进度条出现. 实现思路: 1.当用户点击load button执行异步请求. 调用方法 出现加载条 2.怎么实现进度条呢? 1) 在document.body 新增一个div.覆盖浏览器. 设置背景会灰色. z-index = 999. 加载的时候让用户无法修改界面值 2) 在document.body 新增一个动态的div. 代码实现: Main.html: <!DOCTYPE html> <html>

Android Webview添加网页加载进度条实例详解

推荐阅读:Android WebView线性进度条实例详解 最近在android项目中使用webview嵌套了一个抽奖活动网页,活动上线,运行良好(改了N次需求和突发bug),还好这种模式的活动,只需要修改网页,不需要重新打包发布市场,这也是这种模式开发的优势之一.后来据产品哥反馈说加载网页无进度提示,好吧,这个当时真没考虑这么多,这个要加加..想当然以为轻松搞定之....其实还是比轻松要复杂点... 1.首先自定义一个WebView控件 /** * 带进度条的Webivew * @author

jquery插件NProgress.js制作网页加载进度条_jquery

NProgress.js是极细的纳米级进度条,用现实的细线条动画让用户看到网页正在发生的事情! 你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现.其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见.不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现! NProgress.js应用于复杂网页的细长进度条.由 Google, YouTube, 和 Medium 提供灵感. 安装 依赖于 jQuery (1.8版本及以上),添加 np

教您去掉ie网页加载进度条的方法_javascript技巧

这样虽没有对功能有什么影响,可是体验总不怎么好,那如何解决这个问题了,网上有很多文章都有说过在被目标页加载后设置window.status = "xx"这类的,可是我发现这个方法这样的情形下并不怎么好使. 复制代码 代码如下: <div> <ul> <li><a href="1.html" target="page"></a></li> <li><a hre

混合开发(一)——WebView开发高级技巧之加载网页以及JavaScript,加载进度条

混合开发(一)--WebView开发高级技巧之加载网页以及JavaScript,加载进度条 现在关于混合开发也越来越多了,很多人喜欢跟随,比如HB,比如RN,其实这东西很早就有这么一个概念了,而且说实话,这方面的需求目前来讲,还是只针对一个别的应用的,不过日后会发展成什么样,那我就不知道了,不过在此之前,我们的WebView,还是用的比较多的,包括他浏览新闻,以及加载一些动作,也就是加载JS,这样的话,我们就可以拿出来讲一讲了,说真的,学习android也挺久的了,感觉很多东西,一出来的时候都哇

Sys.ScriptLoader与JS加载进度条的实现

js|加载 今天有人问我,163邮箱那样的Javascript加载进度条是如何实现的. 我不知道,不过实现一个不难,因为<script />有onload和onreadystatechange.还有就是,我们有Atlas. Atlas中有个类:Sys.ScriptLoader,它的作用就是在页面中依次地加载多个Script文件.在实现之前,先来分析一下这个类的代码.   1Sys.ScriptLoader = function() {  2  3    // 所有Script的referenc