js实现进度条

番茄西红柿发布于2019-04-23 13:16 / 2694人阅读

摘要：不多说，直接上代码点击开始设置达到多少进度后停止后函数执行一次结果写完之后发现有个，点击开始后再次点击进度条会再次执行解决办法点击开始后，将的设置为，使不能再次点击添加判断，给出提示，如果进度条在进行中再次点击给一个提示

不多说，直接上代码

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>ProgressBartitle>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         #progress{
12             width: 100%;
13             height: 30px;
14             background: rgb(42, 138, 248);
15         }
16         #bar{
17             width: 1%;
18             height: 28px;
19             margin-top: 1px;
20             background: purple;
21         }
22 
23     style>
24    
25 head>
26     <body>
27         <div id="progress">
28             <div id="bar">div>
29         div>
30         <div><h3 id="text-progress">0%h3>div>
31         <input type="button" id=“btn” value="点击开始" onclick="action()">
32     body>
33     <script>
34         function action(){
35             var iSpeed=1;
36             obj=setInterval(function(){
37                 iSpeed+=1;
38                 if(iSpeed>=100){    // 设置达到多少进度后停止
39                     clearInterval(obj); 
40                     }
41                 bar.style.width=iSpeed+%;
42                 document.getElementById(text-progress).innerHTML=iSpeed+%;
43 
44             },100);    // 1s后函数执行一次
45         }
46         script>
47 html>

　　结果

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

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

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

GPU云服务器云服务器进度条实现代码进度条实现原理 php实现进度条进度条java实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1658.html

css3实现圆形进度条

摘要：在开发微信小程序的时候，遇到圆形进度条的需求。但使用和实现进度条就很容易的避免了这方面的问题。如下图最下面的圆形是进度条的背景，在上面有和两个长方形，用来覆盖不要显示的进度条。在两个长方形的里面分别有一个半圆形用来显示进度。在开发微信小程序的时候，遇到圆形进度条的需求。使用canvas绘图比较麻烦： 1、为了实现在不同屏幕上面的适配，必须动态的计算进度条的大小； 2、在小程序...

leanote 2019-08-21 11:36 评论0 收藏0
css3实现圆形进度条

摘要：在开发微信小程序的时候，遇到圆形进度条的需求。但使用和实现进度条就很容易的避免了这方面的问题。如下图最下面的圆形是进度条的背景，在上面有和两个长方形，用来覆盖不要显示的进度条。在两个长方形的里面分别有一个半圆形用来显示进度。在开发微信小程序的时候，遇到圆形进度条的需求。使用canvas绘图比较麻烦： 1、为了实现在不同屏幕上面的适配，必须动态的计算进度条的大小； 2、在小程序...

enali 2019-08-29 12:12 评论0 收藏0
在Vue项目中使用WebUploader实现文件上传

摘要：简介是由团队开发的一个简单的以为主，为辅的现代文件上传组件。采用大文件分片并发上传，极大的提高了文件上传效率。另外分片传输能够更加实时的跟踪上传进度。选择文件的按钮。简介：WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的...

mindwind 2019-08-02 15:35 评论0 收藏0
在Vue项目中使用WebUploader实现文件上传

摘要：简介是由团队开发的一个简单的以为主，为辅的现代文件上传组件。采用大文件分片并发上传，极大的提高了文件上传效率。另外分片传输能够更加实时的跟踪上传进度。选择文件的按钮。简介：WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的...

endiat 2019-08-26 10:14 评论0 收藏0
在Vue项目中使用WebUploader实现文件上传

摘要：简介是由团队开发的一个简单的以为主，为辅的现代文件上传组件。采用大文件分片并发上传，极大的提高了文件上传效率。另外分片传输能够更加实时的跟踪上传进度。选择文件的按钮。简介：WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的...

funnyZhang 2019-08-30 11:27 评论0 收藏0
窗口进度条及其高级使用

摘要：效果优化一下因为这里的窗口滚动进度条没有过度效果吗虽然谷歌浏览器她会自动帮你优化一点过度的效果，但是我们还是自己写的和谐一点点，所以就加多一句的动画到这里我们的滚动进度条就基本上实现了，也可以做一个很不错的水平效果。我们大概实现的效果就像YouTube上面的红色进度条那样。但是YouTube上面那个进度条还是很坑爹的。文章后面再告诉你们为什么。首先窗口的滚动进度条窗口的滚动条非常...

objc94 2019-08-22 10:48 评论0 收藏0