js實現進度條

番茄西紅柿發布于2019-04-23 13:16 / 2691人閱讀

摘要：不多說，直接上代碼點擊開始設置達到多少進度后停止后函數執行一次結果寫完之后發現有個，點擊開始后再次點擊進度條會再次執行解決辦法點擊開始后，將的設置為，使不能再次點擊添加判斷，給出提示，如果進度條在進行中再次點擊給一個提示

不多說，直接上代碼

 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實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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