不多说，直接上代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>ProgressBar</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         #progress{

             width: 100%;

             height: 30px;

             background: rgb(42, 138, 248);

         }

         #bar{

             width: 1%;

             height: 28px;

             margin-top: 1px;

             background: purple;

         }

     </style>

 </head>

     <body>

         <div id="progress">

             <div id="bar"></div>

         </div>

         <div><h3 id="text-progress">0%</h3></div>

         <input type="button" id=“btn” value="点击开始" onclick="action()">

     </body>

     <script>

         function action(){

             var iSpeed=1;

             obj=setInterval(function(){

                 iSpeed+=1;

                 if(iSpeed>=100){    // 设置达到多少进度后停止

                     clearInterval(obj);

                     }

                 bar.style.width=iSpeed+'%';

                 document.getElementById('text-progress').innerHTML=iSpeed+'%';

             },100);    // 1s后函数执行一次

         }

         </script>

 </html>

　　结果

写完之后发现有个bug，点击开始后再次点击进度条会再次执行

解决办法：1、点击开始后，将button的disabled设置为disabled，使不能再次点击

　　　　　2、添加判断，给出message提示，如果进度条在进行中再次点击给一个alter提示

js实现进度条的更多相关文章

  1. nprogress.js 头部进度条使用方法

    nprogress.js 头部进度条 引入CSS\JS <link rel="stylesheet" type="text/css" href=" ...

  2. js 实现进度条功能。

    /** * 纯js进度条 * Created by kiner on 15/3/22. */ function progress(options){ this.w = (options &&a ...

  3. Js 百分比进度条

    [构想] CSS3 + JS CSS3控制进度 利用CSS3中的 @keyframes JS实现百分比 根据CSS来调整,时间 [页面代码] 第一种: 默认直接进入就是下载 CSS代码 body { ...

  4. js控制进度条到达100%跳转界面一

    进度条一般在手机上用到的比较广泛,刚好最近的项目也是一直在做手机站,这个特效是手机端的一个界面,现在我把改成pc端了,进度条的快慢速度和样式可自行调节,改动也是很方便的,不多说,看代码: <st ...

  5. JS实现 进度条 不用控件

    demo1 <html> <head> <title>进度条</title> <style type="text/css"&g ...

  6. js实现进度条效果

    需求分析: 最近学习javascript客户端脚本语言,学到了两个定时器函数setInterval()和setTimeout(),回想起以前在网页上看到的进度条效果可以使用定时器来实现,所以完成了进度 ...

  7. js 文件下载 进度条

    js: /** * 下载文件 - 带进度监控 * @param url: 文件请求路径 * @param params: 请求参数 * @param name: 保存的文件名 * @param pro ...

  8. js控制进度条数据

    <style><!-- #time{ width:500px; height: 20px; background: red; border-radius: 10px; } --> ...

  9. [转载]ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

随机推荐

  1. ①小姐，来桶全家桶不?（Servlet）

    一.前言 小生不才,大二下半学期第二个星期,近11月博客园.星期六闲来看看经典书.重温下Serlvet. 二.温故而知新:超文本转移协议HTTP HTTP协议是通过互联网(internet)或企业内部 ...

  2. TCP/IP 笔记 - TCP保活机制

    TCP协议中不存在轮询机制,这意味着加入启动一个客户端进程,与服务器建立连接后,然后离开几小时.几天.甚至几个月,连接依然会保持着.理论上,中间路由器可以崩溃和重启,数据线可以断开再连接,只要连接两端 ...

  3. 【web开发】docker中的数据库

    注:自从开始使用docker,部署方面的事情就简单多了.使用docker构建的数据库容器不用直接安装,开启后就可以使用,也比以前方便很多.下面将一些要点记录下来. 下面的例子使用以下环境: - 系统( ...

  4. 【原创】Git删除暂存区或版本库中的文件

    0 基础     我们知道Git有三大区(工作区.暂存区.版本库)以及几个状态(untracked.unstaged.uncommited),下面只是简述下Git的大概工作流程,详细的可以参见本博客的 ...

  5. linux读书笔记1

    (1)进入控制台命令快捷键:Ctrl+alt+F1~F7

  6. Chrome 浏览器最牛插件之一 Vimium

    导航当页: ? 显示help,查询vimium的所有使用方法 h 向左滚动 j 向下滚动 k 向上滚动 l 向右滚动 gg 滚动到顶部 G 滚动到底部 d 向下滚动半页 u 向上滚动半页面 f 显示链 ...

  7. mysql年初至今聚合

    年初至今聚合和滑动聚合类似,不同的地方仅在于统计的仅为当前一年的聚合.唯一的区别体现在下限的开始位置上.在年初至今的问题中,下限为该年的第一天,而滑动聚合的下限为N个月的第一天.因此,年初至今的问题的 ...

  8. C#操作DataReader类

    一.常用属性 名称 说明 Depth 获取一个值,用于指示当前行的嵌套深度 FieldCount 获取当前行中的列数 HasRows 获取一个值,该值指示 SqlDataReader 是否有行 IsC ...

  9. 有关于MVC SignalR的问题

    刚拜读 @Learning hard 的 [Asp.net 开发系列之SignalR篇]专题一:Asp.net SignalR快速入门 跟着博文一步步操作,这是新人的学习方式 然而笔者的开发环境和 @ ...

  10. Laravel日志

    大家在使用 Log::info() 会让日志全部记录默认在 storage/logs/laravel.log 文件里,文件大了查找起来就比较麻烦.那么我可不可以单独记录在一个日志文件里呢? 只需在你的 ...