js如何實(shí)現(xiàn)進(jìn)度條效果

發(fā)布時(shí)間：2020-10-20 16:47:14 來(lái)源：億速云閱讀：166 作者：小新欄目：web開發(fā)

這篇文章主要介紹了js如何實(shí)現(xiàn)進(jìn)度條效果，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

不多說(shuō)，直接上代碼

<!DOCTYPE html>
<html>
<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><h4 id="text-progress">0%</h4></div>
        <input type="button" id=“btn” value="點(diǎn)擊開始" onclick="action()">
    </body>
    <script>
        function action(){
            var iSpeed=1;
            obj=setInterval(function(){
                iSpeed+=1;
                if(iSpeed>=100){    // 設(shè)置達(dá)到多少進(jìn)度后停止
                    clearInterval(obj); 
                    }
                bar.style.width=iSpeed+'%';
                document.getElementById('text-progress').innerHTML=iSpeed+'%';

            },100);    // 1s后函數(shù)執(zhí)行一次
        }
        </script>
</html>

結(jié)果

js如何實(shí)現(xiàn)進(jìn)度條效果

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

解決辦法：

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享js如何實(shí)現(xiàn)進(jìn)度條效果內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

向AI問一下細(xì)節(jié)

js如何實(shí)現(xiàn)進(jìn)度條效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽