不多说，直接上代码

 <!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. [疑难杂症]__关于cmd命令正确而显示不是内部指令的错误(ps:已解决)

    前言 事情的起因是因为我在使用上网程序的时候,运行程序发现端口被占用,这个当然我们知道要将占用的端口结束掉就行,但是显然我们首先要找到占用窗口的程序是什么,才方便在任务管理器中找到并结束掉它. 查找了 ...

  2. Singly linked list algorithm implemented by Java

    Jeff Lee blog:   http://www.cnblogs.com/Alandre/  (泥沙砖瓦浆木匠),retain the url when reproduced ! Thanks ...

  3. centos7非centos标准服务 /etc/init.d/service_name start || stop 启动异常

    公司自己写的java程序,在centos7系统执行/etc/init.d/service_name start||stop的时候报错: grafana二次开发的程序 [root@docp1 init. ...

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

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

  5. spring-boot(五) RabbitMQ详解 定时任务

    学习文章来自:springboot(八):RabbitMQ详解 springboot(九):定时任务 RabbitMQ 即一个消息队列,主要是用来实现应用程序的异步和解耦,同时也能起到消息缓冲,消息分 ...

  6. Java中char和String 的深入理解 - 字符编码

    开篇 https://blog.csdn.net/weixin_37703598/article/details/80679376 我们并不是在写代码,我们只是将自己的思想通过代码表达出来! 1 将思 ...

  7. zookeeper服务发现实战及原理--spring-cloud-zookeeper源码分析

    1.为什么要服务发现? 服务实例的网络位置都是动态分配的.由于扩展.失败和升级,服务实例会经常动态改变,因此,客户端代码需要使用更加复杂的服务发现机制. 2.常见的服务发现开源组件 etcd—用于共享 ...

  8. 彻底弄懂python编码

    在编写python程序的过程中,中英文混用经常会出现编码问题.围绕此问题,本文首先介绍编码的含义及常用编码,随后列举几个python经常遇到的编码异常及解决方法,接着列举笔者在实践中遇到的异常出现的情 ...

  9. python字符串(string)方法整理

    python中字符串对象提供了很多方法来操作字符串,功能相当丰富. print(dir(str)) [..........'capitalize', 'casefold', 'center', 'co ...

  10. 【转载】PhpStudy修改网站根目录

    phpStudy是一个PHP调试环境的程序集成包.该程序包集成最新的Apache+PHP+MySQL+phpMyAdmin+ZendOptimizer,一次性安装,无须配置即可使用,是非常方便.好用的 ...