这实际上非常有趣。这是你的进度条。在我测试过的IE5.5+和Safari 5浏览器中运行良好。
使用系统颜色。 :D
这里可视化
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Progress</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.progressbar, .progressbar strong {
display:block;
height:1.2em
}
.progressbar, .progressbar em {
width:10em
}
.progressbar strong, .progressbar em {
position:absolute;
top:0;
left:0
}
.progressbar {
font:status-bar;
color:windowtext;
background:window;
border:1px solid windowframe;
text-align:center;
position:relative
}
.progressbar strong {
background:highlight;
width:0;
font-weight:normal;
overflow:hidden
}
.progressbar em {
color:highlighttext;
font-style:normal
}
</style>
<script type="text/javascript">
function progress(bar) {
var text1 = bar.getElementsByTagName('span')[0];
var overlay = bar.getElementsByTagName('strong')[0];
var text2 = bar.getElementsByTagName('em')[0];
var value = parseInt(bar.getAttribute('progress'), 10);
value += 1;
overlay.style.width = value / 10 + 'em';
text1.innerHTML = text2.innerHTML = value + '%';
bar.setAttribute('progress', value);
if (value < 100)
setTimeout(function() { progress(bar) }, 20);
}
window.onload = function() {
var span = document.getElementsByTagName('span');
for (var i = 0; i < span.length; i++) {
if (span[i].className == 'progressbar') {
span[i].setAttribute('progress', 0);
var el1 = document.createElement('span');
el1.innerHTML = '0%';
span[i].appendChild(el1);
el1 = document.createElement('strong');
var el2 = document.createElement('em');
el2.innerHTML = '0%';
el1.appendChild(el2);
span[i].appendChild(el1);
progress(span[i]);
}
}
}
</script>
</head>
<body>
<p><span class="progressbar"></span></p>
</body>
</html>
注意,我使用
setAttribute
将值分配给进度条,使用自定义属性名称。
修改脚本以实现真正的进度
上面的示例只是一个虚拟进度条,因为它使用计时器来增加值。要进行真正的进度,您需要稍微修改脚本。您可以更改函数progress
,使其将值添加到当前值中,或者可以使其设置该值。第二种方法可能是您想要使用的。
function add(bar, value) {
bar = document.getElementById(bar);
value = parseInt(bar.getAttribute('progress'), 10) + value;
value = value > 100 ? 100 : value < 0 ? 0 : value;
var text1 = bar.getElementsByTagName('span')[0];
var overlay = bar.getElementsByTagName('strong')[0];
var text2 = bar.getElementsByTagName('em')[0];
overlay.style.width = value / 10 + 'em';
text1.innerHTML = text2.innerHTML = value + '%';
bar.setAttribute('progress', value);
}
function set(bar, value) {
value = value > 100 ? 100 : value < 0 ? 0 : value;
bar = document.getElementById(bar);
var text1 = bar.getElementsByTagName('span')[0];
var overlay = bar.getElementsByTagName('strong')[0];
var text2 = bar.getElementsByTagName('em')[0];
overlay.style.width = value / 10 + 'em';
text1.innerHTML = text2.innerHTML = value + '%';
}
如果确保传递给函数的值在0到100之间,您可以省略value = value > 100 ? 100 : value < 0 ? 0 : value
。
在这里进行测试
编辑:
我把innerText
改成了innerHTML
,这样它就可以在Firefox中工作了。我之前不知道这一点。我还在CSS中将display:inline-block
改成了display:block
。我知道这样做会使进度条无法内联显示,但这样可以在Netscape 9中工作。
overflow: hidden
。 - bobince