【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