不多说，直接上代码

 <!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. SpringBoot2.0应用（四）：SpringBoot2.0之spring-data-jpa

    如何整合spring data jpa 1.pom依赖 <dependency> <groupId>org.springframework.boot</groupId&g ...

  2. web进修之—Hibernate HQL（7）

    概述 HQL是Hibernate封装成为面向对象的数据库查询语言,具有如下特点: 面向对象,包括继承.多态和关联之类的概念,SQL操作的数据库的表,HQL更像是操作对象 大小写敏感,只对对象和属性敏感 ...

  3. SpringBoot学习(二)-->Spring的Java配置方式

    二.Spring的Java配置方式 Java配置是Spring4.x推荐的配置方式,可以完全替代xml配置. 1.@Configuration 和 @Bean Spring的Java配置方式是通过 @ ...

  4. @property详解，@property修饰符以及各个修饰符区别（上）

    相信很多参加过面试的人员很多都会被问到:weak与assign的区别,copy与strong的区别.如果你仅仅说一点点copy一般对NSString,weak对于控件的修饰,assign对于基本类型, ...

  5. MyBatis学习总结（四）——MyBatis缓存与代码生成

    一.MyBatis缓存 缓存可以提高系统性能,可以加快访问速度,减轻服务器压力,带来更好的用户体验.缓存用空间换时间,好的缓存是缓存命中率高的且数据量小的.缓存是一种非常重要的技术. 1.0.再次封装 ...

  6. HangFire循环作业中作业因执行时间太长未完成新作业开启导致重复数据的问题

    解决方法:在执行的任务方法前加上Mutex特性即可,如果作业未完成,新作业开启的话,新作业会放入计划中的作业队列中,直到前面的作业完成. 必须使用Hangfire.Pro.Redis 和 Hangfi ...

  7. mysql Unknown error 1054

    mysql查询错误  Unknown error 1054 错误原因:字段名字不对应 解决方案:一一比对字段名称,令实体字段名称与数据库字段对应或者与你的sql语句中的别名对应起来

  8. 【Java每日一题】20170320

    20170317问题解析请点击今日问题下方的“[Java每日一题]20170320”查看(问题解析在公众号首发,公众号ID:weknow619) package Mar2017; public cla ...

  9. Laravel篇之Laravel的安装及使用

      想搭建一个基于Lavarel和vuejs的个人网站,使用git推送到github存储,千里之行,始于足下,首先要做的用composer来下载laravel框架,并成功运行. 一.使用compose ...

  10. TCP连接与释放

    TCP连接的建立 三次握手 TCP服务器进程先创建传输控制块TCB,时刻准备接受客户进程的连接请求,此时服务器就进入了LISTEN(监听)状态. TCP客户进程也是先创建传输控制块TCB,然后向服务器 ...