前端实现进度条超过文字，进度条变成相反的颜色代码

最新推荐文章于 2023-01-06 22:02:13 发布

weixin_33819479

最新推荐文章于 2023-01-06 22:02:13 发布

阅读量636

点赞数

文章标签：前端 c# ViewUI

原文链接：https://juejin.im/post/5c04f44ee51d453f32195a4a

版权

功能代码如下，经过测试没有问题：

<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>
复制代码

weixin_33819479

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端实现进度条超过文字，进度条变成相反的颜色代码

功能代码如下，经过测试没有问题：<html> <head> <title>前端实现进度条超过文字，进度条变成相反的颜色代码</title> </head> <style> *{ margin:0; padding:0; } .wrap{ position: relative; width:200px;...
复制链接

扫一扫