JS控制进度条

最新推荐文章于 2024-08-02 18:20:19 发布

xuzhiwangray

最新推荐文章于 2024-08-02 18:20:19 发布

阅读量5.1k

点赞数 1

本文链接：https://blog.csdn.net/xuzhiwangray/article/details/53364581

版权

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

摘要由CSDN通过智能技术生成

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