zoukankan      html  css  js  c++  java
  • 【HTML+CSS+JavaScript】实现进度条功能

    需求:实现进度条功能

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>进度条</title>
        <style type="text/css">
            .outter {
                margin:200px auto 0px;
                 600px;
                height: 40px;
                border: 1px solid pink;
            }
            .inner {
                height: 40px;
                 0%;
                background: pink;
            }
            .process {
                margin-top:2px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="outter">
            <div class="inner"></div>
        </div>
    
        <div class="process"></div>
    
    
        <script type="text/javascript">
            var innerEle = document.querySelector('.inner');
            var proEle = document.querySelector('.process');
    
            var m = 0;
    
            var timer = setInterval(function(){
                innerEle.style.width = m+'%';
                proEle.innerHTML = m+'%';
    
                if (m >= 100) {
                    clearInterval(timer);
                    return;
                }
                m += 1;
            },100)
    
    
        </script>
    </body>
    </html>
  • 相关阅读:
    初识sql语句
    IO模型比较分析
    select,poll,epoll,selectors
    多路复用IO
    非阻塞IO
    yield-from示例
    阻塞IO(blocking IO)
    IO模型介绍
    gevent实现套接字
    gevent异步,io自动切换
  • 原文地址:https://www.cnblogs.com/neymargoal/p/9470734.html
Copyright © 2011-2022 走看看