<!DOCTYPE HTML>

 <html>

   <head>

     <meta charset ="utf-8">

     <title>JavaScript 百分比进度条</title>

     <style>

       #container{

   width:100%;

   height:30px;

   border:1px solid lightgrey;

   margin:40px

 }

 #bar{

   height:30px;

   background:green;

   width:1%;

 }

     </style>

   </head>

   <body>

     <div id="container">

       <div id="bar">

         <div id="mybar">

         </div>

       </div>

     </div>

     <button onclick="start()">

       点击

     </button>

     <script>

       function start(){

   var mybar=document.getElementById("bar");

   var width=1;

   var time=setInterval(move,100);

   function move(){

     if(width >= 100){

       width=1;

     }else{

       width++;

       mybar.style.width=width+"%";

       mybar.innerHTML=width*1+"%";

     }

   }

 }

     </script>

   </body>

 </html>

JavaScript 进度条重复加载的更多相关文章

  1. javascript进度条实现

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. Javascript进度条

    一个简单的进度条演示. <!doctype html> <html> <head> <meta charset="utf8"> &l ...

  3. JavaScript进度条（datalist/repeater等多个进度条）

    JS代码: function SingleProgressBar() { var iload = document.getElementById("iLoading"); var ...

  4. JavaScript 以及 css3进度条

    JavaScript css3进度条 使用css3实现进度条 <!DOCTYPE html> <html lang="en"> <head> & ...

  5. 简易js进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js 进度条效果

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>< ...

  7. ASP.NET中二进制流下载文件时进度条的使用

    说明 在下载大文件时,页面会进入假死状态,于是加上一个进度条以标识后台程序正在运行. 目前,做的进度条并不是实时的,并不会根据程序执行的进度正确显示. 目前是将进度条定时加载到90%,然后停止,等待后 ...

  8. PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...

  9. 原生javascript模仿win8等待进度条。

    一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简 ...

随机推荐

  1. OpenStack依然大行其道，可是否能等来属于自己的时代

    版权声明:不论什么转载需全文转载并保留来源(微信公众号techculture)和该声明,并同一时候转载文后的二维码.否则视作侵权. OpenStack在云计算领域依然火热,甚至能够说势不可挡.这可能是 ...

  2. web前端开发——AJAX入门

    什么是AJAX AJAX: A New Approach to Web Applications XML AJAX是老技术新思想. 它所包括的内容我们之前都接触过.例如以下: (1)使用XHTML和C ...

  3. STL_算法_局部排序(partial_sort、partial_sort_copy)

    C++ Primer 学习中. . . 简单记录下我的学习过程 (代码为主) /***************************************** // partial_sort(b, ...

  4. 算法导论————EXKMP

    [例题传送门:caioj1461] [EXKMP]最长共同前缀长度 [题意]给出模板串A和子串B,长度分别为lenA和lenB,要求在线性时间内,对于每个A[i](1<=i<=lenA), ...

  5. Redis封装之List

    /// <summary> /// Redis list的实现为一个双向链表,即可以支持反向查找和遍历,更方便操作,不过带来了部分额外的内存开销, /// Redis内部的很多实现,包括发 ...

  6. 简单缓存Cache

    接口 interface ICache { /// <summary> /// 添加 /// </summary> /// <param name="key&q ...

  7. eq3

    然而一旦美国经济进入持续复苏,美联储必将逐步退出量化宽松和逐渐收紧银根,美国联邦基金利率和银行同业间拆借利率将会上升.这将使美元升值,并使部分套利交易平仓.而一旦美元企稳走强,国债利率上扬,大宗商品价 ...

  8. vue中剖析中的一些方法

    1 判断属性 71 -81 var hasOwnProperty = Object.prototype.hasOwnProperty; /** * Check whether the object h ...

  9. Python正则表达式初识（十）附正则表达式总结

    今天分享正则表达式最后一个特殊字符“\d”,具体的教程如下. 1.特殊字符“\d”十分常用,其代表的意思是数字.代码演示如下图所示. 其中“+”的意思是表示连续,在这里代表的意思是连续的数字.但是输出 ...

  10. 【转】flex中的labelFunction（combox和dataGrid）

    Flex中,对于显示一个字段,只需要指定对应字段属性给labelField即可,当需要上述所需要的功能的时候就得做个转换了,在Flex的基于List的组件都有一个labelFunction方法能很简单 ...