zoukankan      html  css  js  c++  java
  • HTML5+CSS+JQuery 实现简单的进度条功能

    样式:

    <style type="text/css">  
        .processcontainer2{  
           width:450px;  
           border:1px solid #6C9C2C;  
           height:25px;  
           border-radius: 10px;
           box-shadow: 5px 10px 20px lightgray;
         } 
        #processbar2{  
           background:green;  
           float:left; 
           height:100%;  
           text-align:center;  
           line-height:150%; 
           border-radius: 10px;
           color: white;
         }  
    </style>

    关键HTML代码:

    <body>
            <div class="processcontainer2">
                <div id="processbar2">0</div>
            </div>
    </body>

    脚本:

        <script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
        <script type="text/javascript">
            function gogogo(){
                var bar=$("#processbar2");
                $(bar).html(parseInt($(bar).html())+1+"%")
                $(bar).css("width",$(bar).html())
                console.log($(bar).html())
                //进度条满
                if($(bar).html()=="100%"){
                    window.clearInterval(start);
                }
            }
            var start=setInterval(function(){gogogo()},50);
            $(document).ready(function(){
                start;
            })
        </script>

    效果:

  • 相关阅读:
    第五周总结
    第四周总结
    关于“模仿"和”创新“
    第三周总结
    第九周总结
    第八周总结
    第六周总结
    中国历史上成功的两人合作
    第五周总结
    第四周总结
  • 原文地址:https://www.cnblogs.com/EdinburghOne/p/9392346.html
Copyright © 2011-2022 走看看