首頁 > 文章 > web前端 > JavaScript控制進度條的實例分析

JavaScript控制進度條的實例分析

黄舟原創: 2017-11-21 11:36:521455瀏覽

在我們之前我們為大家介紹了JavaScript實作進度條的方法，原生實作進度條，那麼如何控制進度條？ JS控制進度條用到的元素比較簡單，就一個p標籤內嵌一個span標籤即可，外面那層p做背景，內部那層span做動態進度顯示，由JS控制。

整體程式碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>JS控制进度条</title>
    <style type="text/css">
        body
        {
            height:30px;
            width:330px;
            background-color:blue;
        }
        
        #ProgressBarBackgroundOne
        {
            background:url(ProgressBk.png) no-repeat 0 center;
            height:10px;
            width:300px;
        }
        #ProgressBarOne
        {
            background:url(ProgressFt.png) no-repeat 0 center;
            height:10px;
            width:0%;
            display:block;
        }
        
        #ProgressBarBackgroundTwo
        {
            background-color:White;
            height:10px;
            width:300px;
        }
        #ProgressBarTwo
        {
            background-color:Gray;
            height:10px;
            width:0%;
            display:block;
        }
        
    </style>
    <script type="text/javascript">
        var numOne = 0;
        var numTwo = 0;
        function SetProgressOne() {
            var ProgressOne = document.getElementById(&#39;ProgressBarOne&#39;);
            if (numOne < 100) {
                numOne = numOne + 1; 
             }
             ProgressOne.setAttribute(&#39;style&#39;, &#39;width:&#39; + numOne + &#39;%&#39;);
            setTimeout(SetProgressOne, 500);
        }

        function SetProgressTwo() {
            var ProgressTwo = document.getElementById(&#39;ProgressBarTwo&#39;);
            if (numTwo < 100) {
                numTwo = numTwo + 1;
            }
            ProgressTwo.setAttribute(&#39;style&#39;, &#39;width:&#39; + numTwo + &#39;%&#39;);
            setTimeout(SetProgressTwo, 500);
        }
        
    </script>
</head>
<body>
<p id="ProgressBarBackgroundOne"><span id="ProgressBarOne"></span></p>
<p id="ProgressBarBackgroundTwo"><span id="ProgressBarTwo"></span></p>
</body>
<script type="text/javascript">
    SetProgressOne();
    SetProgressTwo();
</script>
</html>

為了方便顯示，我就直接在html文件裡把css文字和js腳本寫了出來，這是原生js控制進度條方式，另外也可以使用Node.js或mootools之類的js函式庫來寫。

SetProgressOne()是使用了圖片來進行進度顯示；SetProgressTwo()則是使用了顏色進行進度顯示，原理上都是一樣，都是透過JS控制span標籤的屬性:style="width :預設值%"即可。在表現上，使用圖片就比使用顏色好一些，因為使用顏色不好處理圓角，並不是所有瀏覽器都支援CSS的圓角屬性，以下是效果對比：

JavaScript控制進度條的實例分析

總結：

透過本文的詳細學習，相信小夥伴們對JavaScript控制進度條有了進一步的了解，希望對你的工作有所幫助！

相關推薦：

#JavaScript進度條控制項實作的範例

JavaScript實作進度列的幾種方法介紹

JavaScript實作進度列的原生程式碼

以上是JavaScript控制進度條的實例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：5個直接可以拿來用的JS實用功能程式碼片段下一篇：5個直接可以拿來用的JS實用功能程式碼片段

看更多