<!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. XMPP使用简单介绍--登录

    在现阶段的通信服务中,各种标准都有.因此会出现无法实现相互连通,而XMPP(Extensible Message and presence Protocol)协议的出现,实现了整个及时通信服务协议的互 ...

  2. [9]EC_屏蔽ecshop云提示no_license

    安装完后,打开后台就看到这个,特别烦,想立刻干掉它. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdXB0b255dWFu/font/5a6L5L2T/f ...

  3. h5 图片回显

    <form method="post" id="imgForm" action ="/hi/holdHead" enctype=&qu ...

  4. BZOJ 3196 线段树套平衡树

    (代码无比丑陋) //By SiriusRen #include <cstdio> #include <algorithm> using namespace std; int ...

  5. Gym - 100203H Highways 最小生成树

    题意:平面上n个点修路,已经修好了m条,再修若干条使得点之间连通,求最小代价的方案. 思路:基本上是裸的最小生成树了,我这里存边直接存在multyset了,取的时候也比较方便,我本来就是这么考虑的,队 ...

  6. OPENCV(4) —— ImgProc

    2D图像滤波器基础类BaseFilter:dst(x,y) = F(src(x,y), src(x+1,y)... src(x+wdith-1,y), src(y+1,x)... src(x+widt ...

  7. [工具] UltraEdit使用技巧汇总

    ltraEdit是一套功能强大的文本编辑器,可以编辑文本.十六进制.ASCII码,可以取代记事本,内建英文单字检查.C++及VB指令突显,可同时编辑多个文件,而且即使开启很大的文件速度也不会慢.说到编 ...

  8. c# 读取导入的excel文件，循环批量处理数据

    dt = FM_HR_ShiftMaintenanceManager.GetCsvToDataTable(strConn, excelName,"XJSQMonthlyImportExcel ...

  9. Java:网络传输

    网络以字节码传输 String s = "我恨你"; //转成字节: byte[] brr = s.getBytes();//gbk //iE:utf-8 String s1 = ...

  10. 手把手教你在VMware虚拟机中安装Ubuntu14.04系统

    在VMware中创建完虚拟机之后,一般需要给虚拟机安装系统,比较受青睐的系统有Ubuntu和Centos,关于Centos系统的安装之前已经写过了,感兴趣的小伙伴可以戳这篇文章:靠谱的centos7. ...