<!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. thinkphp5项目--企业单车网站（二）

    thinkphp5项目--企业单车网站(二) 项目地址 fry404006308/BicycleEnterpriseWebsite: Bicycle Enterprise Websitehttps:/ ...

  2. 初学Larevel 2014-08-21 11:24 90人阅读 评论(0) 收藏

    添加第一个路由时就遇到了 404错误,查了一下说要这样才能 版权声明:本文为博主原创文章,未经博主允许不得转载.

  3. C#解决System.Security.Cryptography.MD5.Create()调用的目标发生了异常)的问题

    今天搭建微信扫码支付环境的时候,一样的配置参数,调用连接提示错误 错误:调用的目标发生了异常 然后跟踪到执行 MD5 md5 = System.Security.Cryptography.MD5.Cr ...

  4. Chromium String usage

    For Developers‎ > ‎ Chromium String usage Types of StringsIn the Chromium code base, we use std:: ...

  5. noip 2018 day1 T1 铺设道路 贪心

    Code: #include<cstdio> using namespace std; int main() { int last=0,ans=0; int n;scanf("% ...

  6. 23种JavaScript设计模式

    原文链接:https://boostlog.io/@sonuton/23-javascript-design-patterns-5adb006847018500491f3f7f 转自: https:/ ...

  7. uniq---报告或忽略文件中的重复行

    uniq命令用于报告或忽略文件中的重复行,一般与sort命令结合使用. 语法 uniq(选项)(参数) 选项 -c或——count:在每列旁边显示该行重复出现的次数: -d或--repeated:仅显 ...

  8. 【Uva 307】Sticks

    [Link]: [Description] 给你最多n个棍子; (n< = 64) 每根棍子长度(1..50) 问你这n根棍子,可以是由多少根长度为x的棍子分割出来的; x要求最小 [Solut ...

  9. struts2的字符串参数

    一定要熟记一个东西,一层引号的是变量,两层引号的是字符串 如"蓝"/'蓝'是变量,而" '蓝' "/ ' "蓝" '是字符串 打代码时要警惕 ...

  10. 从2014年D2前端技术论坛看前端发展趋势

    上周六有幸參加了在杭州阿里巴巴西溪园区举办的2014年D2前端技术论坛和晚上的酒会.实地感受了一下阿里巴巴前端开发的技术氛围和影响力.整体上看这次D2规模还是挺大的,国内前端的知名大牛基本上都到了. ...