JS控制进度条

最新推荐文章于 2024-05-02 09:34:08 发布

原创最新推荐文章于 2024-05-02 09:34:08 发布 · 5.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #CSS #HTML

JavaScript 同时被 3 个专栏收录

3 篇文章

订阅专栏

前端

2 篇文章

订阅专栏

CSS

1 篇文章

订阅专栏

本文介绍了如何使用JavaScript控制进度条，主要通过设置div内的span标签样式，改变宽度来实现进度显示。提供了两种方法，一种是用图片，另一种是用颜色变化。JS代码可以直接在HTML中写入，也可结合Node.js或mootools等库使用。

JS控制进度条用到的元素比较简单，就一个div标签内嵌一个span标签即可，外面那层div做背景，内部那层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>
<div id="ProgressBarBackgroundOne"><span id="ProgressBarOne"></span></div>
<div id="ProgressBarBackgroundTwo"><span id="ProgressBarTwo"></span></div>
</body>
<script type="text/javascript">
    SetProgressOne();
    SetProgressTwo();
</script>
</html>

为了方便显示，我就直接在html文档里把css文本和js脚本写了出来，这是原生js控制进度条方式，另外也可以使用Node.js或mootools之类的js库来编写。

SetProgressOne()是使用了图片来进行进度显示；SetProgressTwo()则是使用了颜色进行进度显示，原理上都是一样，都是通过JS控制span标签的属性:style="width:预设值%"即可。在表现上，使用图片就比使用颜色要好一些，因为使用颜色不好处理圆角，并不是所有浏览器都支持CSS的圆角属性，下面是效果对比：