<!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. SDSoC使用体验

    本文作者:卜居 转载请保留作者信息.原文网址(http://blog.csdn.net/kkk584520/article/details/47220575). 本文project可到我的资源下载(h ...

  2. Tensorflow MNIST 数据集測试代码入门

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50614444 測试代码已上传至GitH ...

  3. 【Android实战】Socket消息通信

    这篇博客的内容是基于http://my.oschina.net/fengcunhan/blog/178155进行改造的.所以须要先看完这篇博客,然后再来看以下的内容. 1.须要完毕的功能是直播间的so ...

  4. IOS－－文件管理NSFileManager

    iOS的沙盒机制.应用仅仅能訪问自己应用文件夹下的文件.iOS不像android.没有SD 卡概念.不能直接訪问图像.视频等内容. iOS应用产生的内容,如图像.文件.缓存内容等都必须存储在自己的沙盒 ...

  5. android ViewPager实现 跑马灯切换图片+多种切换动画

    近期在弄个项目.要求有跑马灯效果的图片展示. 网上搜了一堆,都没有完美实现的算了还是自己写吧! 实现原理利用 ViewPager 控件,这个控件本身就支持滑动翻页非常好非常强大好多功能都能用上它.利用 ...

  6. Controller接口控制器3

    11.AbstractWizardFormController 向导控制器类提供了多步骤(向导)表单的支持(如完善个人资料时分步骤填写基本信息.工作信息.学校信息等) 假设现在做一个完善个人信息的功能 ...

  7. 关键字&标识符

    关键字:被Java语言赋予了特殊含义,用做专门用途的字符串(单词) 保留字: 标识符:凡是自己可以起名字的地方都叫标识符 命名的规则:(一定要遵守,不遵守就会报编译的错误)由26个英文字母大小写,0- ...

  8. c# 引用ConfigurationManager 类

    c#添加了Configuration;后,竟然找不到 ConfigurationManager 这个类,后来才发现:虽然引用了using System.Configuration;这个包,但是还是不行 ...

  9. VS Code在本地进行调试和打开本地服务器

    进行本地调试 1.在扩展中搜索插件 Debugger for Chrome 进行安装.我已经进行了安装,就没有出现安装字样. 2.配置launch.json文件,根据步骤来.file就是你在浏览器中需 ...

  10. 学习推荐《从Excel到Python数据分析进阶指南》高清中文版PDF

    Excel是数据分析中最常用的工具,本书通过Python与Excel的功能对比介绍如何使用Python通过函数式编程完成Excel中的数据处理及分析工作.在Python中pandas库用于数据处理,我 ...