javascript - 设置HTML进度条的innerHTML

Question

我有一个简单的进度条<progress value="22" id = "timerProgress"></progress>

我已经设法使用 jQuery 更改了它的值，但我想编写类似 Remaining : 10 sec 的文本在进度条内。

我尝试了 innerHTML 和 html 属性，但没有成功。

怎么办？

Answer 1

我认为您必须添加另一个元素。我尝试在进度条上使用伪元素，但由于某种原因它不起作用(仅在 Safari 中尝试过)。

http://jsfiddle.net/smt6J/

HTML

<div id="progress">
    <progress max="100" value="22" class="progressBar"></progress>
    <div class="progressText">22% Done</div>
</div>

JQuery

$('#progress .progressBar').val(50);
$('#progress .progressText').text('50% Done');

CSS

#progress {
    position:relative;
}
#progress .progressBar {
    position: absolute;
    left:0;
    top:0;
}
#progress .progressText {
    position: absolute;
    left:0;
    top:0;
}