zoukankan      html  css  js  c++  java
  • 【JS】实现倒计时进度条

    该实现需要两步达成:

    HTML部分:

    <div class="tab-pane active in" id="profile">
        <form id="form1" action="../reputation/List" method="GET">
        </form>
        
        <div id="progressBar" style="100%;height:2px;background-color:teal;">&nbsp;</div>
    </div>

    progressBar为进度条,下面使用js的setInterval函数对width进行操作以实现倒计时滚动条。

        <script type="text/javascript">
            ...var count=100;
            setInterval(autoSubmit,100);
            
            function autoSubmit(){
                count--;
                if(count<0){
                    document.getElementById("form1").submit();
                }else{
                    var progressBar=document.getElementById("progressBar");
                    progressBar.style.width=count+"%";
                }
            }
        </script>

    代码解释:

    每过100毫秒,autosubmit函数就会被调用一次,这是setInterval函数的功能。

    在autoSubmit函数内部,count实现自减,由于其原值为100,于是加上百分号便成了百分比。

    最后便把这个百分比赋予progressBar.style.width,由此便达成了目的。

    END

  • 相关阅读:
    Java基础知识
    jQuery的表单操作
    SSM——查询_分页
    jQuery实现查看删除
    SSM之Maven工程的搭建
    Mybatis使用@Param
    Mybatis简单的CURD
    Mybatis使用接口开发
    初入Mybatis
    SQL语句
  • 原文地址:https://www.cnblogs.com/heyang78/p/15543958.html
Copyright © 2011-2022 走看看