使用JavaScript创建进度条-yiteyi-C++库

进度条用于描述正在执行的任何任务的进度。进度条通常用于显示下载和上载状态。换句话说，我们可以说，进度条可以用来描述任何正在进行的事情的状态。

null

要使用JavaScript创建基本进度条，需要执行以下步骤：

为进度条创建HTML结构 : 下面的代码包含两个名为“Progress_Status”和“myprogressbar”的“div”标记元素。

HTML

< div id = "Progress_Status" >

< div id = "myprogressBar" ></ div >

</ div >

添加CSS : 下面的代码用于设置进度条的宽度和背景色，以及进度条中的进度状态。

CSS

                               #Progress_Status {                             
                                                             width: 50%;                             
                                                             background-color: #ddd;                             
                               }                             
                                            
                               #myprogressBar {                             
                                                             width: 1%;                             
                                                             height: 35px;                             
                                                             background-color: #4CAF50;                             
                                                             text-align: center;                             
                                                             line-height: 32px;                             
                                                             color: black;                             
                               }                             

添加JavaScript : 下面的代码使用javascript函数“更新”和“场景”创建一个动态进度条（动画）。

JavaScript

                               <script>                             
                               function                                              update() {                             
                                                             var                                              element = document.getElementById(                                              "myprogressBar"                                              );                             
                                                             var                                              width = 1;                             
                                                             var                                              identity = setInterval(scene, 10);                             
                                                             function                                              scene() {                             
                                                             if                                              (width >= 100) {                             
                                                             clearInterval(identity);                             
                                                             }                                              else                                              {                             
                                                             width++;                             
                                                             element.style.width = width +                                              '%'                                              ;                             
                                                             }                             
                                                             }                             
                               }                             
                               </script>                             

链接HTML、CSS和JavaScript元素 下面的程序显示了链接上述HTML、CSS和JavaScript代码的进度条的完整代码：

HTML

                               <!DOCTYPE html>                             
                               <                                              html                                              >                             
                               <                                              style                                              >                             
                               #Progress_Status {                             
                                                             width: 50%;                             
                                                             background-color: #ddd;                             
                               }                             
                                            
                               #myprogressBar {                             
                                                             width: 2%;                             
                                                             height: 20px;                             
                                                             background-color: #4CAF50;                             
                               }                             
                               </                                              style                                              >                             
                               <                                              body                                              >                             
                                            
                               <                                              h3                                              >Example of Progress Bar Using JavaScript</                                              h3                                              >                             
                                            
                               <                                              p                                              >Download Status of a File:</                                              p                                              >                             
                                            
                               <                                              div                                              id                                              =                                              "Progress_Status"                                              >                             
                                                             <                                              div                                              id                                              =                                              "myprogressBar"                                              ></                                              div                                              >                             
                               </                                              div                                              >                             
                                            
                               <                                              br                                              >                             
                               <                                              button                                              onclick                                              =                                              "update()"                                              >Start Download</                                              button                                              >                             
                                            
                               <                                              script                                              >                             
                               function update() {                             
                                                             var element = document.getElementById("myprogressBar");                             
                                                             var width = 1;                             
                                                             var identity = setInterval(scene, 10);                             
                                                             function scene() {                             
                                                             if (width >= 100) {                             
                                                             clearInterval(identity);                             
                                                             } else {                             
                                                             width++;                             
                                                             element.style.width = width + '%';                             
                                                             }                             
                                                             }                             
                               }                             
                               </                                              script                                              >                             
                                            
                               </                                              body                                              >                             
                               </                                              html                                              >                             

输出：

点击“开始下载”按钮，可以看到进度条中的进度动画。

创建带有标签的进度条

要添加数字标签以指示用户在流程中的距离，需要在进度条内部或外部添加一个新元素，以显示进度状态。

要添加标签，请在“myprogressbar”元素的上述代码中进行以下更改。

CSS

                           #myprogressBar {                         
                                                     width: 1%;                         
                                                     height: 35px;                         
                                                     background-color: #4CAF50;                         
                                                     text-align: center;                         
                                                     line-height: 32px;                         
                                                     color: black;                         
                           }                         

在函数“update”和“scene”中进行以下更改，以使数字标签与进度栏中的进度一起更新。

JavaScript

                           <script>                         
                                      
                           function                                        update() {                         
                                                     var                                        element = document.getElementById(                                        "myprogressBar"                                        );                         
                                                     var                                        width = 1;                         
                                                     var                                        identity = setInterval(scene, 10);                         
                                      
                                                     function                                        scene() {                         
                                                     if                                        (width >= 100) {                         
                                                     clearInterval(identity);                         
                                                     }                                        else                                        {                         
                                                     width++;                         
                                                     element.style.width = width +                                        '%'                                        ;                         
                                                     element.innerHTML = width * 1  +                                        '%'                                        ;                         
                                                     }                         
                                                     }                         
                           }                         
                                      
                           </script>                         

下面是使用HTML、CSS和JavaScript创建带有标签的进度条的完整程序：

HTML

                           <!DOCTYPE html>                         
                           <                                        html                                        >                         
                           <                                        style                                        >                         
                                      
                           #Progress_Status {                         
                                                     width: 50%;                         
                                                     background-color: #ddd;                         
                           }                         
                                      
                           #myprogressBar {                         
                                                     width: 1%;                         
                                                     height: 35px;                         
                                                     background-color: #4CAF50;                         
                                                     text-align: center;                         
                                                     line-height: 32px;                         
                                                     color: black;                         
                           }                         
                                      
                                      
                           </                                        style                                        >                         
                           <                                        body                                        >                         
                                      
                           <                                        h3                                        >Example of Progress Bar Using JavaScript</                                        h3                                        >                         
                                      
                           <                                        p                                        >Download Status of a File:</                                        p                                        >                         
                                      
                           <                                        div                                        id                                        =                                        "Progress_Status"                                        >                         
                                                     <                                        div                                        id                                        =                                        "myprogressBar"                                        >1%</                                        div                                        >                         
                           </                                        div                                        >                         
                                      
                           <                                        br                                        >                         
                           <                                        button                                        onclick                                        =                                        "update()"                                        >Start Download</                                        button                                        >                         
                                      
                           <                                        script                                        >                         
                                      
                           function update() {                         
                                                     var element = document.getElementById("myprogressBar");                         
                                                     var width = 1;                         
                                                     var identity = setInterval(scene, 10);                         
                                                     function scene() {                         
                                                     if (width >= 100) {                         
                                                     clearInterval(identity);                         
                                                     } else {                         
                                                     width++;                         
                                                     element.style.width = width + '%';                         
                                                     element.innerHTML = width * 1  + '%';                         
                                                     }                         
                                                     }                         
                           }                         
                                      
                           </                                        script                                        >                         
                                      
                           </                                        body                                        >                         
                           </                                        html                                        >                         

输出：

文章版权归作者所有，未经允许请勿转载。

THE END

Javascript