zoukankan      html  css  js  c++  java
  • 进度条

    ```

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>ProgressBar</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #progress{
         100%;
        height: 30px;
        background: rgb(42, 138, 248);
      }
      #bar{
         1%;
        height: 28px;
        margin-top: 1px;
        background: purple;
      }
    </style>
     
    </head>
      <body>
        <div id="progress">
          <div id="bar"></div>
        </div>
        <div><h3 id="text-progress">0%</h3></div>
        <input type="button" id=“btn” value="点击开始" onclick="action()">
      </body>
    <script>
      function action(){
        var iSpeed=1;
        obj=setInterval(function(){
          iSpeed+=1;
          if(iSpeed>=100){ // 设置达到多少进度后停止
            clearInterval(obj); 
          }
        bar.style.width=iSpeed+'%';
        document.getElementById('text-progress').innerHTML=iSpeed+'%';
        },100); // 1s后函数执行一次
      }
    </script>
    </html>

    ```

  • 相关阅读:
    HQueue_Install_In_Ubuntu
    win10_64_ssh连接linux
    win10防火墙服务灰色解决办法
    打开houdini软件的脚本
    houdini_license_sever start and off
    Java关于Object类中equal方法的理解
    Java关于Object类中equal方法的理解
    单源最短路径
    单源最短路径
    最小生成树
  • 原文地址:https://www.cnblogs.com/niuzijie/p/11996619.html
Copyright © 2011-2022 走看看