不多说，直接上代码

 <!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. Node.js 获取微信JS-SDK CONFIG

    背景 前端在调用微信提供的分享.拍照.扫一扫等功能时需要到后台获取配置,主要是签名(signature).Node 开发可以用朴灵大佬的SDK--co-wechat-api. 配置 到微信公众平台进入 ...

  2. Linux 权限位详解

    1. Linux 权限位 对于权限,有点绕,因为文件的权限和目录的权限是有一些区别的. 在Linux中,有5种权限,分别是,r.w.x.s.t. 可读权限:r 可写权限:w 可执行权限:x Setui ...

  3. leetcode — rotate-list

    /** * Source : https://oj.leetcode.com/problems/rotate-list/ * * * Given a list, rotate the list to ...

  4. centos7编译linux的内核源码

    昨天编译了一个linux 内核源码,遇到一些问题, 今天把我遇到的问题和解决方法分享给大家.希望可以帮助到需要的人. 1.检查是否安装了相应的包 我第一次编译的时候只安装的“Development T ...

  5. T4代码生成器

    最近用MVC时业务上需要新增不同类型的视图页面,实际上页面排版什么的都差不多,只是内容有所不同,但是不能使用同一个视图. 想到了用T4代码生成器完成,之前就有听说过这个好东西,但是一直没有深入研究.借 ...

  6. Perl回调函数和闭包

    在Perl中,子程序的引用常用来做回调函数(callback).闭包(closure),特别是匿名子程序. 回调函数(callback) 关于什么是回调函数,见一文搞懂:词法作用域.动态作用域.回调函 ...

  7. 另类爬虫：从PDF文件中爬取表格数据

    简介   本文将展示一个稍微不一样点的爬虫.   以往我们的爬虫都是从网络上爬取数据,因为网页一般用HTML,CSS,JavaScript代码写成,因此,有大量成熟的技术来爬取网页中的各种数据.这次, ...

  8. BurpSuiteProxy安装使用

    第一步先安装jdk    https://www.oracle.com/technetwork/java/javase/downloads/jdk11-downloads-5066655.html  ...

  9. [android] 内容观察者

    拦截短信,比如当发短信的时候,就把短信读取出来,当系统的短信发生变化的时候,大叫一声,把数据发送到公共的消息邮箱里面,我们的应用通过内容观察者观察公共的消息邮箱 获取ContentResolver对象 ...

  10. 4.5 explain 之 ref

    一.说明 显示索引的哪一列被使用了,如果可能的话,是一个常数.哪些列或常量被用于查找索引上的值. 二.示例 a. b. c. 关注我的公众号,精彩内容不能错过