<!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. js斐波那契数列求和

    一.递归算法  function recurFib(n) {   if (n < 2) {     return n;   }   else {     return recurFib(n-1) ...

  2. 微软CEO纳德拉拥抱Linux意欲何为？

    "我不喜欢打一场过时的战争."微软 CEO 萨蒂亚·纳德拉说道,"我想要打一场全新的战役." 上周日晚上.萨蒂亚·纳德拉来到旧金山 North Beach 区的 ...

  3. Android页面事件挂接模拟

    Java没有C#的引用类型.因此事件的挂接一般都是利用接口来实现,有两种方式: 1)定义一个实现事件接口的类,然后实现接口方法,然后通过将这个类的实例加入到事件监听器里面: public class ...

  4. Delegates, Events, and Anonymous Methods 委托、事件与匿名方法

    http://www.cnblogs.com/r01cn/archive/2012/11/30/2795977.html

  5. Linux常用的安全工具

    Linux常用的安全工具 "工欲善其事,必先利其器".作为一个合格的系统管理员,要应对可能发生的安全事件,掌握Linux下各种必须的安全工具是首要大事.本文主要介绍Linux上常用 ...

  6. openSUSE leap 42.3 添加HP Laserjet Pro M128fn打印机和驱动

    一.安装驱动 YaST控制中心->软件管理->搜索->hplip 安装hplip 如下图: HPLIP(Linux Imaging and Printing Object)以前有hp ...

  7. js003-4方向8方向函数

    1,求四方向或者8方向的周围的棋子. /** * pos 1-4, 1-8 4/8方向的周围 * @param {*} pos * @param {*} dir */ var _nearChess = ...

  8. 如何批量ping地址查看网络是否畅通

    测试环境搬迁后,需要批量去ping所有机器的IP,看网络是否畅通 测试思路: [weblogic@pays03pre_BankVerify luyantest]$ ping -c 1 172.29.1 ...

  9. 无闻go编程基础笔记

    Go语言做Web编程非常方便,并且在开发效率和程序运行效率方面都非常优秀.相比于Java,其最大的优势就是简便易用,而相比于PHP,它最大的优势就是性能好. (go做web)推荐Gorilla的库,里 ...

  10. SpringBoot结合Mybatis 使用 mapper*.xml 进行数据库增删改查操作

    什么是 MyBatis? MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架. MyBatis 消除了几乎所有的 JDBC 代码和参数的手工设置以及对结果集的检索. MyBa ...