【JS】實現倒計時進度條

該實現需要兩步達成：

HTML部分：

<div class="tab-pane active in" id="profile">
    <form id="form1" action="../reputation/List" method="GET">
    </form>
    
    <div id="progressBar" style="width: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