JavaScript控制进度条的实例分析

黄舟原创: 2017-11-21 11:36:52 1118浏览

在我们之前我们为大家介绍了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('ProgressBarOne');
            if (numOne < 100) {
                numOne = numOne + 1; 
             }
             ProgressOne.setAttribute('style', 'width:' + numOne + '%');
            setTimeout(SetProgressOne, 500);
        }

        function SetProgressTwo() {
            var ProgressTwo = document.getElementById('ProgressBarTwo');
            if (numTwo < 100) {
                numTwo = numTwo + 1;
            }
            ProgressTwo.setAttribute('style', 'width:' + numTwo + '%');
            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的圆角属性，下面是效果对比：

`U8[B`Y(KVR%Y)NOH28U9IX.png