js實(shí)現(xiàn)進(jìn)度條

番茄西紅柿發(fā)布于2019-04-23 13:16 / 2746人閱讀

摘要：不多說，直接上代碼點(diǎn)擊開始設(shè)置達(dá)到多少進(jìn)度后停止后函數(shù)執(zhí)行一次結(jié)果寫完之后發(fā)現(xiàn)有個(gè)，點(diǎn)擊開始后再次點(diǎn)擊進(jìn)度條會再次執(zhí)行解決辦法點(diǎn)擊開始后，將的設(shè)置為，使不能再次點(diǎn)擊添加判斷，給出提示，如果進(jìn)度條在進(jìn)行中再次點(diǎn)擊給一個(gè)提示

不多說，直接上代碼

 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="點(diǎn)擊開始" onclick="action()">
32     body>
33     <script>
34         function action(){
35             var iSpeed=1;
36             obj=setInterval(function(){
37                 iSpeed+=1;
38                 if(iSpeed>=100){    // 設(shè)置達(dá)到多少進(jìn)度后停止
39                     clearInterval(obj); 
40                     }
41                 bar.style.width=iSpeed+%;
42                 document.getElementById(text-progress).innerHTML=iSpeed+%;
43 
44             },100);    // 1s后函數(shù)執(zhí)行一次
45         }
46         script>
47 html>

　　結(jié)果

寫完之后發(fā)現(xiàn)有個(gè)bug，點(diǎn)擊開始后再次點(diǎn)擊進(jìn)度條會再次執(zhí)行

解決辦法：1、點(diǎn)擊開始后，將button的disabled設(shè)置為disabled，使不能再次點(diǎn)擊

　　　　　2、添加判斷，給出message提示，如果進(jìn)度條在進(jìn)行中再次點(diǎn)擊給一個(gè)alter提示

GPU云服務(wù)器云服務(wù)器進(jìn)度條實(shí)現(xiàn)代碼進(jìn)度條實(shí)現(xiàn)原理 php實(shí)現(xiàn)進(jìn)度條進(jìn)度條java實(shí)現(xiàn)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/1658.html

相關(guān)文章

css3實(shí)現(xiàn)圓形進(jìn)度條

摘要：在開發(fā)微信小程序的時(shí)候，遇到圓形進(jìn)度條的需求。但使用和實(shí)現(xiàn)進(jìn)度條就很容易的避免了這方面的問題。如下圖最下面的圓形是進(jìn)度條的背景，在上面有和兩個(gè)長方形，用來覆蓋不要顯示的進(jìn)度條。在兩個(gè)長方形的里面分別有一個(gè)半圓形用來顯示進(jìn)度。在開發(fā)微信小程序的時(shí)候，遇到圓形進(jìn)度條的需求。使用canvas繪圖比較麻煩： 1、為了實(shí)現(xiàn)在不同屏幕上面的適配，必須動態(tài)的計(jì)算進(jìn)度條的大??； 2、在小程序...

leanote 2019-08-21 11:36 評論0 收藏0
css3實(shí)現(xiàn)圓形進(jìn)度條

摘要：在開發(fā)微信小程序的時(shí)候，遇到圓形進(jìn)度條的需求。但使用和實(shí)現(xiàn)進(jìn)度條就很容易的避免了這方面的問題。如下圖最下面的圓形是進(jìn)度條的背景，在上面有和兩個(gè)長方形，用來覆蓋不要顯示的進(jìn)度條。在兩個(gè)長方形的里面分別有一個(gè)半圓形用來顯示進(jìn)度。在開發(fā)微信小程序的時(shí)候，遇到圓形進(jìn)度條的需求。使用canvas繪圖比較麻煩： 1、為了實(shí)現(xiàn)在不同屏幕上面的適配，必須動態(tài)的計(jì)算進(jìn)度條的大?。? 2、在小程序...

enali 2019-08-29 12:12 評論0 收藏0
在Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳

摘要：簡介是由團(tuán)隊(duì)開發(fā)的一個(gè)簡單的以為主，為輔的現(xiàn)代文件上傳組件。采用大文件分片并發(fā)上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實(shí)時(shí)的跟蹤上傳進(jìn)度。選擇文件的按鈕。簡介：WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開發(fā)的一個(gè)簡單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。在現(xiàn)代的瀏覽器里面能充分發(fā)揮HTML5的優(yōu)勢，同時(shí)又不摒棄主流IE瀏覽器，沿用原來的...

mindwind 2019-08-02 15:35 評論0 收藏0
在Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳

摘要：簡介是由團(tuán)隊(duì)開發(fā)的一個(gè)簡單的以為主，為輔的現(xiàn)代文件上傳組件。采用大文件分片并發(fā)上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實(shí)時(shí)的跟蹤上傳進(jìn)度。選擇文件的按鈕。簡介：WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開發(fā)的一個(gè)簡單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。在現(xiàn)代的瀏覽器里面能充分發(fā)揮HTML5的優(yōu)勢，同時(shí)又不摒棄主流IE瀏覽器，沿用原來的...

endiat 2019-08-26 10:14 評論0 收藏0
在Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳

摘要：簡介是由團(tuán)隊(duì)開發(fā)的一個(gè)簡單的以為主，為輔的現(xiàn)代文件上傳組件。采用大文件分片并發(fā)上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實(shí)時(shí)的跟蹤上傳進(jìn)度。選擇文件的按鈕。簡介：WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開發(fā)的一個(gè)簡單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。在現(xiàn)代的瀏覽器里面能充分發(fā)揮HTML5的優(yōu)勢，同時(shí)又不摒棄主流IE瀏覽器，沿用原來的...

funnyZhang 2019-08-30 11:27 評論0 收藏0
窗口進(jìn)度條及其高級使用

摘要：效果優(yōu)化一下因?yàn)檫@里的窗口滾動進(jìn)度條沒有過度效果嗎雖然谷歌瀏覽器她會自動幫你優(yōu)化一點(diǎn)過度的效果，但是我們還是自己寫的和諧一點(diǎn)點(diǎn)，所以就加多一句的動畫到這里我們的滾動進(jìn)度條就基本上實(shí)現(xiàn)了，也可以做一個(gè)很不錯(cuò)的水平效果。我們大概實(shí)現(xiàn)的效果就像YouTube上面的紅色進(jìn)度條那樣。但是YouTube上面那個(gè)進(jìn)度條還是很坑爹的。文章后面再告訴你們?yōu)槭裁础?首先窗口的滾動進(jìn)度條窗口的滾動條非常...

objc94 2019-08-22 10:48 評論0 收藏0