61,110
社区成员
发帖
与我相关
我的任务
分享
<style>
.process{position:relative;height:30px;width:300px;border:solid 1px black;line-height:30px;color:White;font-weight:bold}
.process .top,.process .bottom{position:absolute;left:0px;top:0px;height:30px;width:100%;overflow:hidden;color:Black;text-align:center;}
.process .top{color:white;z-index:1;background:blue;width:0%}
.process .word{left:140px;position:absolute;}/*定死文字位置就行,依据.process容器的宽度来调整left,让文字比较居中一点,只需要更改top的宽度,就会自动显示白色文字*/
</style>
<div class="process" id="dvProcess">
<div class="top"><div class="word"></div></div>
<div class="bottom"><div class="word"></div></div>
</div>
<script>
var percent = 0, divs, timer;
window.onload = function () {
divs = document.getElementById('dvProcess').getElementsByTagName('div');
timer = setInterval(function () {
percent += 5;
divs[0].style.width = divs[1].innerHTML = divs[3].innerHTML = percent + '%';
if (percent == 100) clearInterval(timer);
}, 1000);
}
</script>