How to implement a simple progress bar effect in js (code example)-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to implement a simple progress bar effect in js (code example)

Oct 24, 2018 pm 04:15 PM

js progress bar

What this article brings to you is to introduce the method of realizing a simple progress bar effect in js (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Not much to say, just go to the code

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;ProgressBar&lt;/title&gt;
    &lt;style&gt;
        *{
            margin: 0;
            padding: 0;
        }
        #progress{
            width: 100%;
            height: 30px;
            background: rgb(42, 138, 248);
        }
        #bar{
            width: 1%;
            height: 28px;
            margin-top: 1px;
            background: purple;
        }

    &lt;/style&gt;
   
&lt;/head&gt;
    &lt;body&gt;
        &lt;div id=&quot;progress&quot;&gt;
            &lt;div id=&quot;bar&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div&gt;&lt;h3 id=&quot;text-progress&quot;&gt;0%&lt;/h3&gt;&lt;/div&gt;
        &lt;input type=&quot;button&quot; id=“btn” value=&quot;点击开始&quot; onclick=&quot;action()&quot;&gt;
    &lt;/body&gt;
    &lt;script&gt;
        function action(){
            var iSpeed=1;
            obj=setInterval(function(){
                iSpeed+=1;
                if(iSpeed&gt;=100){    // 设置达到多少进度后停止
                    clearInterval(obj); 
                    }
                bar.style.width=iSpeed+'%';
                document.getElementById('text-progress').innerHTML=iSpeed+'%';

            },100);    // 1s后函数执行一次
        }
        &lt;/script&gt;
&lt;/html&gt;

Copy after login

Result

##After I finished writing, I found a bug, click Start and then click Progress again The bar will be executed again

Solution:

1. After clicking start, set the button's disabled to disabled so that it cannot be clicked again

2. Add judgment and give message prompt, if the progress bar is clicked again during progress, an alter prompt will be given

The above is the detailed content of How to implement a simple progress bar effect in js (code example). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn