不多说，直接上代码

 <!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. github提交代码contributions不显示小绿块

    问题描述: 最近发现一个问题就是不管是提交新增的代码还是修改后提交的代码在github的contributions上都不显示贡献小绿块. 于是我在 github help 里面找到了答案: 官方链接如 ...

  2. Java基础系列--throw、throws关键字

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/8484697.html 一.概述 throw和throws就是异常相关的关键字,在java中 ...

  3. Go Web：RESTful web service示例

    RESTful架构的简介 web服务的架构模式主要有2种:SOAP和REST.SOAP和REST都回答了同一个问题:如何访问web服务. SOAP风格的程序是功能驱动的,要借助xml来传递数据,明确表 ...

  4. Spring Cloud Stream消费失败后的处理策略（二）：自定义错误处理逻辑

    应用场景 上一篇<Spring Cloud Stream消费失败后的处理策略(一):自动重试>介绍了默认就会生效的消息重试功能.对于一些因环境原因.网络抖动等不稳定因素引发的问题可以起到比 ...

  5. Linux日志 系统日志及分析

    Linux系统拥有非常灵活和强大的日志功能,可以保存几乎所有的操作记录,并可以从中检索出我们需要的信息. 大部分Linux发行版默认的日志守护进程为 syslog,位于 /etc/syslog 或 / ...

  6. 快乐的一天从JAVA第一课开始，生活美滋滋！！！

    ---恢复内容开始--- 学JAVA第一天 今天稀里糊涂就把JAVA环境配好了 现在回想一下,吧环境跟大家分享一下…… 第一步:下载         JAVA(推荐使用谷歌浏览器,因为谷歌浏览器右键点 ...

  7. 解决org.hibernate.HibernateException: identifier of an instance of com.ahd.entity.Order was altered from2 to 0

    错误信息 严重: Servlet.service() for servlet [springmvc] in context with path [/order] threw exception [Re ...

  8. laravel5.1 ajax post传值_token

    laravel框架中只要是涉及到post传值都需要传 _token ,这是框架中为了防止crsf攻击所做的安全措施,那么我们用到ajax中的post 方式传值时,也需要在所传数据中添加一个_token ...

  9. css3制作商品展示

    今天看到一个用css3制作的简单的展示页面所以,我自己又是初学者所以决定模仿着写一个,下面右边是一开始的,右边是鼠标放上去暂时的.这个是由下到上逐渐显示的首先直接上代码. <!DOCTYPE h ...

  10. Python importlib 动态加载模块

    # 创建一个 src 文件夹,里面有一个 commons.py 文件,内容如下 def add(): print("add ....") # 创建一个 app.py 文件,内容如下 ...