功能代码如下,经过测试没有问题:
<html>
<head>
<title>前端实现进度条超过文字,进度条变成相反的颜色代码</title>
</head>
<style>
*{
margin:0;
padding:0;
}
.wrap{
position: relative;
width:200px;
height:40px;
line-height:40px;
margin:40px auto 0;
text-align:center;
background-color:red;
}
.progress{
position: absolute;
height:40px;
width:10%;
background-color:#FFFF00;
z-index: 0;
left:0;
top:0;
}
.wrap span{
position: relative;
z-index: 4;
}
@keyframes myfirst
{
to {width: 100%;}
}
.addtranslate{
animation: myfirst 2s;
-moz-animation: myfirst 2s; /* Firefox */
-webkit-animation: myfirst 2s; /* Safari 和 Chrome */
-o-animation: myfirst 2s; /* Opera */
animation-fill-mode: forwards;
}
</style>
<body>
<div class="wrap" id="wrap">
<div class="progress" id="progress"></div>
<span>文本中的数字</span>
</div>
<script>
// 前端颜色取反算法(原理 0xFFFFFF-OldColorValue格式化成16进制 就是原有的颜色取反的值。)
function ColorReverse(OldColorValue){
var OldColorValue="0x"+OldColorValue.replace(/#/g,"");
var str="000000"+(0xFFFFFF-OldColorValue).toString(16);
return str.substring(str.length-6,str.length);
}
// 获取dom标签和其中的属性值
var spanInfo=document.getElementsByTagName("span")
var wrap=document.getElementById("wrap")
var progress=document.getElementById("progress")
//定时任务,第一次执行加载动画,直到进度宽度超过文字宽度,则颜色变成相反值,直到结束
var clearTime=null;
clearTime=setInterval(function(){
if(progress.className.indexOf("addtranslate")==-1){
progress.className=progress.className+" addtranslate";
}
console.log("progress.offsetWidth:"+progress.offsetWidth)
if(progress.offsetWidth>=(spanInfo[0].offsetLeft+spanInfo[0].offsetWidth)){
var newColor=ColorReverse("#FFFF00") ;
progress.style.backgroundColor="#"+newColor;
clearInterval(clearTime)
}
},50)
</script>
</body>
</html>
复制代码