2

我的网站上有一个进度条，这是它的 CSS 的一部分：

.progress-bar span {
    display: inline-block;
    height: 25px;
    width: 78%; //the actual position

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

   //other css
}

我必须更改指示进度位置的宽度（您在此处看到的线）。这是我第一次使用进度条，我不知道如何设置 javascript 代码。

有什么建议吗？jsfiddle

4

4 回答 4

3

这是没有jQuery的方式

HTML

<div  class="progress-bar" align="left">
    <span id="prog"></span>
</div>

JS：

var elem = document.getElementById("prog");
elem.style.width = "88%";
于 2013-08-22T13:25:48.033 回答
1

我建议使用 jQuery 让您的 javascript 调用更简单。你可以在这里下载最新版本：http: //jquery.com/download/

首先，将 jQuery 文件包含在 html 的头部，如下所示：

<head>
...
<script type="text/javascript" src="<location of file>jquery-1.10.2.min.js"></script>
...
</head>

然后在您自己的 javascript 代码中，您可以像这样移动进度条的位置：

jQuery('.progress-bar scan').css('width', <desired width>);

希望这会有所帮助。

于 2013-08-22T13:18:18.453 回答
0

您可以使用：

document.querySelectorAll('.progress-bar span').forEach(function(elem) {
    elem.style.width = '<YOUR WIDTH>'; 
});

没有 jQuery

于 2013-08-22T13:27:50.883 回答
0

我只是这样增加了宽度：

function increment(){
var width = document.getElementById('progressbar').clientWidth;
var divArray = document.getElementById('progressbar');
if(width<500){
var largura = width+10;
divArray.style.width = largura+'%';
setTimeout("increment()",1000);
}
else{
window.location.href = "http://www.google.com/";
}
}

并且每秒执行一次，因此每秒都会递增，但您可以按照您想要的方式更改它。

于 2016-04-20T08:26:12.797 回答