AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

技术心得记录：漂亮的触发行变色代码

2024-06-27 22
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 技术心得记录：漂亮的触发行变色代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



/ <!【CDATA【 /


div{margin:1px; vertical-align:middle;}


.FadeId18Class


{


color:white;


}


.FadeId18OverClass


{


color:#D369A4;


}


/ 】】> /


";


this.Element = {};


this.Element.Set = 【】;


this.Element.Add =


function(sId, sOriginColor, sOverColor, sOutColor, iTime, iIntervalMs, bCompColor, sClassName, sOverClassName)


{


Faded_AddElement

(sId, sOriginColor, sOverColor, sOutColor, iTime, iIntervalMs, bCompColor, sClassName, sOverClassName, This)

};

this.Element.BatchAdd =

function(Main, sChildTag, ArOriColor, ArOverColor, ArOutColor, iTime, iIntervalMs, bCompColor, sClassName, sOverClassName)

{


Main = fSetObject(Main, "Faded Batch Main is null!");

sChildTag = sChildTag.toUpperCase();

var EleAr = 【】;


var TagAr = sChildTag.split(This.TagSpliter);

EleAr = fGetDeepTag(Main, TagAr);

if(ArOriColor.length===1)

{


ArOriColor.push(ArOriColor【0】);

}

if(ArOverColor.length===1)

{


ArOverColor.push(ArOverColor【0】);

}

if(typeof(ArOutColor)=="boolean"||ArOutColor.constructor==Boolean)

{


ArOutColor = 【ArOutColor】;

}

if(ArOutColor.length===1)

{


ArOutColor.push(ArOutColor【0】);

}

for(var i=0, j=EleAr.length; i

{


if(i%2===0)

{


Fade.Element.Add

(

EleAr【i】

, ArOriColor【0】

, ArOverColor【0】

, ArOutColor【0】

,iTime

, iIntervalMs

, bCompColor

, sClassName

, sOverClassName

);

}

else

{


Fade.Element.Add

(

EleAr【i】

, ArOriColor【1】

, ArOverColor【1】

, ArOutColor【1】

,iTime

, iIntervalMs

, bCompColor

, sClassName

, sOverClassName

);

}

}

}

this.Go = fGo;

function fGo(fIniter)

{


if(fIsFunc(fIniter)) fIniter(Param);

for(var i = 0, j=This.Element.Set.length; i

{


var TempObj = This.Element.Set【i】;

TempObj.style.backgroundColor = TempObj【"Extend"】【"OriginalColor"】;

TempObj【"Interval"】 = {};

if(TempObj【"Extend"】【"CompColor"】)

{


TempObj.style.color = fGetCompColor(TempObj【"Extend"】【"OriginalColor"】);

}

if(TempObj【"Extend"】【"ClassName"】!="")

{


TempObj.className = TempObj【"Extend"】【"ClassName"】;

}

TempObj.onmouseover = fOnMouseOver;

TempObj.onmouseout = fOnMouseOut;

}

}

function fOnMouseOut()

{


try

{


clearInterval(this【"Interval"】【"Over"】【"Go"】);

}

catch(e)

{


}

this【"Interval"】【"Out"】 ={}

this【"Interval"】【"Out"】【"Count"】 = 0;

if(this【"Extend"】【"ClassName"】!="")

{


this.className = this【"Extend"】【"ClassName"】;

}

var BgColor = this.style.backgroundColor==""?"#ffffff":this.style.backgroundColor;

if(/rgb(/i.test(BgColor))

{


BgColor = fRgbToHex(BgColor);

}

this【"Interval"】【"Out"】【"FadeArray"】 =


Faded_Fade

(

BgColor,


this【"Extend"】【"OutColor"】,


this【"Extend"】【"Time"】,


false,


true

);

var me = this;

this【"Interval"】【"Out"】【"Go"】 =


setInterval

(

function()

{


if(me【"Interval"】【"Out"】【"Count"】>=me【"Interval"】【"Out"】【"FadeArray"】.length)

{


clearInterval(me【"Interval"】【"Out"】【"Go"】);

me【"Interval"】【"Out"】【"Count"】 = null;

return;

}

var sBgColor = me【"Interval"】【"Out"】【"FadeArray"】【me【"Interval"】【"Out"】【"Count"】】;

me.style.backgroundColor = sBgColor;

if(me【"Extend"】【"CompColor"】)

{


me.style.color = fGetCompColor(sBgColor);

}

if(This.Debug)

defaultStatus = me【"Interval"】【"Out"】【"Count"】;

me【"Interval"】【"Out"】【"Count"】++;

}

,

me【"Extend"】【"IntervalMs"】

) //


}

function fOnMouseOver()

{


try

{


clearInterval(this【"Interval"】【"Out"】【"Go"】);

}

catch(e)

{


}

this【"Interval"】【"Over"】 ={}

this【"Interval"】【"Over"】【"Count"】 = 0;

if(this【"Extend"】【"OverClassName"】!="")

{


this.className = this【"Extend"】【"OverClassName"】;

}

var BgColor = this.style.backgroundColor==""?"#ffffff":this.style.backgroundColor;

if(/rgb(/i.test(BgColor))

{


BgColor = fRgbToHex(BgColor);

}

this【"Interval"】【"Over"】【"FadeArray"】 =


Faded_Fade

(

BgColor,


this【"Extend"】【"MoveColor"】,


this【"Extend"】【"Time"】,


false,


true

);

var me = this;

this【"Interval"】【"Over"】【"Go"】 =


setInterval

(

function()

{


if(me【"Interval"】【"Over"】【"Count"】>=me【"Interval"】【"Over"】【"FadeArray"】.length)

{


clearInterval(me【"Interval"】【"Over"】【"Go"】);

me【"Interval"】【"Over"】【"Count"】 = null;

return;

}

var sBgColor = me【"Interval"】【"Over"】【"FadeArray"】【me【"Interval"】【"Over"】【"Count"】】;

me.style.backgroundColor = sBgColor;

if(me【"Extend"】【"CompColor"】)

{


me.style.color = fGetCompColor(sBgColor);

}

if(This.Debug)

defaultStatus = me【"Interval"】【"Over"】【"Count"】;

me【"Interval"】【"Over"】【"Count"】++;

}

,

me【"Extend"】【"IntervalMs"】

)

}

function fGetAu(){ return Au; }

}

function Faded_AddElement

(sId, sOriginColor, sOverColor, sOutColor, iTime, iIntervalMs, bCompColor, sClassName, sOverClassName, oFaded)

{


var Obj = fSetObject(sId);

if(!bCompColor) bCompColor = false;

else bCompColor = true;

if(!sClassName) sClassName = "";

if(!sOverClassName) sOverClassName = "";

if(!sOriginColor)

{


sOriginColor = fGetStyle(Obj, "backgroundColor");

if(sOriginColor=="transparent") sOriginColor = "#FFFFFF";

}

if(!sOverColor) sOverColor = "#cccccc";

if(!sOutColor) sOutColor = sOriginColor;

if(!iTime) iTime = 10;

if(!iIntervalMs) iIntervalMs = 50;

Obj【"Extend"】 = {};

Obj【"Extend"】【"OriginalColor"】 = sOriginColor;

Obj【"Extend"】【"MoveColor"】 = sOverColor;

Obj【"Extend"】【"OutColor"】 = sOutColor;

Obj【"Extend"】【"Time"】 = iTime;

Obj【"Extend"】【"IntervalMs"】 = iIntervalMs;

Obj【"Extend"】【"CompColor"】 = bCompColor;

Obj【"Extend"】【"ClassName"】 = sClassName;

Obj【"Extend"】【"OverClassName"】 = sOverClassName;

var iPos = oFaded.Element.Set.length;

oFaded.Element.Set【iPos】 = Obj;

}

function fGetDeepTag(Ele, TagAr, ResultAr)

{


if(!ResultAr) ResultAr = 【】;

var TagArLen = TagAr.length;


if(TagArLen===0) return ResultAr;

if(TagArLen===1)

{


for( var i=0, j=Ele.childNodes.length; i

{


var TempChild = Ele.childNodes【i】;

if(TempChild.nodeType===1)

{


if(TempChild.tagName==TagAr【0】)

{


ResultAr.push(TempChild);

}

}

}

return ResultAr;

}

for(var i=0, j=Ele.childNodes.length; i

{


var TempChild = Ele.childNodes【i】;

if(TempChild.nodeType===1)

{


if(TempChild.tagName==TagAr【0】)

{


var TempAr = TagAr.slice();

TempAr.shift();

arguments.callee(TempChild, TempAr, ResultAr);

}

}

}

return ResultAr;

}

function Faded_Fade(sOriginalColor, sFinalColor, iTime, sOpt, bPadSharp)

{


if(!sOriginalColor||sOriginalColor=="") fFatalError("原色不能为空!");

if(!sFinalColor||sFinalColor=="") fFatalError("最终色不能为空!");

if(!iTime||typeof(iTime)!="number") iTime = 5;

if(!sOpt) sOpt = "auto";

var sSharp = "";

if(bPadSharp) sSharp = "#";

var Debug = false;

var oAr = fSplitColor(sOriginalColor);

var oArInt = fHexArrayToInt(oAr);

var fAr = fSplitColor(sFinalColor);

var fArInt = fHexArrayToInt(fAr);

var ReturnAr = 【】;

switch(sOpt)

{


default:

var SubtractAr = 【】;

var SpanAr = 【】;

var ReturnArInt = 【】;

for(var i=0, j=oArInt.length; i

{


SubtractAr【i】 = fArInt【i】 - oArInt【i】;

SpanAr【i】 = SubtractAr【i】/iTime;

}

for(var i=0, j=iTime; i

{


ReturnArInt【i】 = 【】;

ReturnArInt【i】【0】 = parseInt(oArInt【0】+(SpanAr【0】(i+1)));

ReturnArInt【i】【1】 = parseInt(oArInt【1】+(SpanAr【1】(i+1)));

ReturnArInt【i】【2】 = parseInt(oArInt【2】+(SpanAr【2】(i+1)));

ReturnAr【i】 = 【

""

,sSharp

,fPadStr(ReturnArInt【i】【0】.toString(16)).toUpperCase()

,fPadStr(ReturnArInt【i】【1】.toString(16)).toUpperCase()

,fPadStr(ReturnArInt【i】【2】.toString(16)).toUpperCase()

】.join('');

}

sFinalColor= sFinalColor.replace(/^#/, "");

if(bPadSharp) sFinalColor = "#"+sFinalColor;

ReturnAr【ReturnAr.length-1】 = sFinalColor.toUpperCase();

break;

}

if(Debug)

{


alert

(

" oAr: "+oAr

+"\n oArInt: "+oArInt

+"\n fAr: "+fAr

+"\n fArInt: "+fArInt

+"\n typeof(sOpt): "+typeof(sOpt)

+"\n SubtractAr: "+SubtractAr

+"\n SpanAr: "+SpanAr

+"\n ReturnArInt: "+ReturnArInt

+"\n ReturnAr: "+ReturnAr

);

}

return ReturnAr.slice();

}

function fHexArrayToInt(ar)

{


var TempAr = 【】;

for(var i=0, j=ar.length; i

{


TempAr【i】 = parseInt(ar【i】, 16);

}

return TempAr.slice();

}

function fSplitColor(sColor)

{


if(!sColor||sColor=="")

{


alert("颜色不能为空!");

return;

}

var Debug = true;

sColor = sColor.replace(/^#/, "");

if(sColor.length == 3)

{


var sTemp = "";

for(var i = 0, j=sColor.length; i

{


sTemp+= ""+sColor.charAt(i)+sColor.charAt(i);

}

sColor = sTemp;

}

if(sColor.length!=6)

{


alert("无法识别的颜色代码!")

return;

}

var arHex = 【】;

arHex【0】 = ""+sColor.charAt(0)+sColor.charAt(1);

arHex【1】 = ""+sColor.charAt(2)+sColor.charAt(3);

arHex【2】 = ""+sColor.charAt(4)+sColor.charAt(5);

return arHex.slice();

}

function fGetCompColor(sInput, sOpt, bNoSharp, bDebug)

{


if(!sInput) sInput = "#000000";

if(!sOpt) sOpt = 'hex';

sOpt = sOpt.toLowerCase();

var arCell = 【】;

var arHex = 【】;

var arHexFinal = 【】;

var arInt = 【】;

var arIntFinal = 【】;

var Debug = bDebug;

if(Debug)

{


alert

(

"sInput: "+sInput

+" sOpt: "+sOpt

);

}

sInput = sInput.replace(/^#/, "");

switch(sOpt)

{


case "rgb":

break;

default:

if(sInput.length==3)

{


var arTemp = fStringToArray(sInput);

sInput = ""+arTemp【0】+arTemp【0】+arTemp【1】+arTemp【1】+arTemp【2】+arTemp【2】;

}

if(sInput.length==6)

{


arCell = fStringToArray(sInput);


arHex【0】 = "0x"+arCell【0】+arCell【1】;

arHex【1】 = "0x"+arCell【2】+arCell【3】;

arHex【2】 = "0x"+arCell【4】+arCell【5】;

arInt【0】 = parseInt(arHex【0】, 16);

arInt【1】 = parseInt(arHex【1】, 16);

arInt【2】 = parseInt(arHex【2】, 16);

arIntFinal【0】 = Math.abs(255-arInt【0】);

arIntFinal【1】 = Math.abs(255-arInt【1】);

arIntFinal【2】 = Math.abs(255-arInt【2】);

arHexFinal【0】 = fPadStr(arIntFinal【0】.toString(16)).toUpperCase();

//代码效果参考：http://hnjlyzjd.com/hw/wz_24916.html

arHexFinal【1】 = fPadStr(arIntFinal【1】.toString(16)).toUpperCase();

arHexFinal【2】 = fPadStr(arIntFinal【2】.toString(16)).toUpperCase();

if(Debug)

{


alert("arCell: "+arCell);

alert("arHex: "+arHex);

alert("arInt: "+arInt);

alert("arIntFinal: "+arIntFinal);

alert("arHexFinal: "+arHexFinal);

}

if(bNoSharp) return arHexFinal.join("");

return "#"+arHexFinal.join("");

}

else

{


alert("无法识别的十六进制颜色代码!");

}

break;


}

return "000000";

}

function fStringToArray(sInput)

{


return sInput.split("");

}

function fGetStyle(Ele, sStyle)

{


var Brs = fCkBrs();


if(Brs===3)

{


var sReturn = getComputedStyle(Ele, null)【sStyle】;

if(/\brgb\b/i.test(sReturn))

{//代码效果参考：http://hnjlyzjd.com/xl/wz_24914.html

return fRgbToHex(sReturn);

}

return sReturn;

}

else return Ele.currentStyle【sStyle】;

}

function fCkBrs()

{


switch (navigator.appName)

{


case 'Opera': return 2;

case 'Netscape': return 3;

default: return 1;

}

}

function fRgbToHex(sRgb, bNoSharp, bDebug)

{


if(!sRgb||sRgb=="") throw new Error("RGB颜色代码不正确!");

var Debug = bDebug;

var sSharp = "";

if(!bNoSharp) sSharp = "#";

if(/rgb(/i.test(sRgb))

{


sRgb = sRgb.replace(/^【\s\S】?rgb((.?))【\s\S】/gi, "$1").replace(/\s+/g, "");

}

var RgbAr = sRgb.split(",");

var sReturn =

【

sSharp

,(fPadStr((RgbAr【0】-0).toString(16)).toUpperCase())

,(fPadStr((RgbAr【1】-0).toString(16)).toUpperCase())

,(fPadStr((RgbAr【2】-0).toString(16)).toUpperCase())

】.join("");

if(Debug)alert(sReturn);

return sReturn;

}

function fPadStr(sSrc, sPad, nLen)

{


if(!sSrc)return false;

if(!sPad)sPad='0';

if(!nLen)nLen=2;

sSrc+='';

if(sSrc.length>=nLen)return sSrc;

sPad=new Array(nLen+1).join(sPad);

var re=new RegExp('.(.{'+(nLen)+'})$');

return (sPad+sSrc).replace(re,'$1');

}

function fIsFunc(Func)

{


if(Func) if(Func.constructor==Function) return true;

return false;

}

function fIsEmpty(Source)

{


var bStr = false;

if(Source.constructor==String) Source = 【Source】, bStr = true;

return /^\s$/.test(Source【0】);

}

function fTrim(Source)

{


var bStr = false;

if(Source.constructor==String) Source = 【Source】, bStr = true;

Source【0】 = Source【0】.replace(/^\s+|\s+$/g,'');

if(bStr) return Source【0】;

}

function fSetObject(Obj, sMsg, Dcu)

{


if(!sMsg) sMsg = "无法获得对象!";

if(!Dcu) Dcu = document;

switch(Obj.constructor)

{


case String:

Obj = Dcu.getElementById(Obj);

break;

case Array:


Obj = Obj【0】;

break;

}

if(Obj==null) throw new Error(sMsg);

return Obj;

}

function fFatalError(sMsg)

{


if(!sMsg) sMsg = "an fatal error occurring, program abort now!"

throw new Error(sMsg);

}

function fCkBrs()

{


switch (navigator.appName)

{


case 'Opera': return 2;

case 'Netscape': return 3;

default: return 1;

}

}

function Id(sTag, oDocument)

{


if(!oDocument) oDocument = document;

return oDocument.getElementById(sTag);

}

function E(sTag, oDocument)

{


if(!oDocument) oDocument = document;

return oDocument.createElement(sTag);

}

function T(sText, oDocument)

{


if(!oDocument) oDocument = document;

return oDocument.createTextNode(sText);

}

function fFormat(sStr)

{


var Len = arguments.length;

switch(Len)

{


case 0: return "";

case 1: return sStr;

}

var Re = null;


for(var i=1, j=0; i

{


Re = new RegExp(【"\{", j, "\}"】.join(""), "g");

sStr = sStr.replace(Re, arguments【i】);

}


Re = null;

return sStr;

}

//<!【CDATA【


var Time = 20;

var Interval = 5;

var Container = document.getElementById("Container");

var StartDate = new Date();

var Fade = new Faded();

Fade.Debug = false;

Fade.Element.BatchAdd

(

"Container"

, "tbody->tr"

, 【"#F5F5F5", "#ececec"】

, 【"#cccccc", "#cccccc"】

, false

//, 【"#eeeeee", "#ffffff"】

, Time

, Interval

);

Fade.Go();

var FadedAu = Fade.Get.Au();

document.title = FadedAu.Subject+" "+FadedAu.Version;

Fade = null;

//】】>

文章标签：
Go
容器
vr&ar
游客zn7mvnkypuy76
目录
相关文章
博客zhu虎康
|
6月前
|
JavaScript
弹框下次触发时还保留上次的触发条件
弹框下次触发时还保留上次的触发条件
博客zhu虎康
35 4
游客mldfis24krfue
|
3月前
|
Kubernetes 监控 安全
在K8S中，滚动更新的过程？
在K8S中，滚动更新的过程？
游客mldfis24krfue
112 0
游客mldfis24krfue
|
3月前
|
Kubernetes 监控 API
在K8S中，滚动更新的过程是什么？
在K8S中，滚动更新的过程是什么？
游客mldfis24krfue
100 0
你挚爱的强哥
|
6月前
一个简单的Vue2例子讲明白拖拽drag、移入dragover、放下drop的触发机制先后顺序
一个简单的Vue2例子讲明白拖拽drag、移入dragover、放下drop的触发机制先后顺序
你挚爱的强哥
397 1
范德萨_
scrollIntoView()定位元素显示导致页面上移解决方法？
scrollIntoView()定位元素显示导致页面上移解决方法？
范德萨_
523 0
入冉心
|
JavaScript 前端开发
JavaScript时间戳获取及时间戳判断（同时设置不同的颜色。已开始的事件显示绿色，未开始的事件显示黑色，过去的事件显示灰色）
JavaScript时间戳获取及时间戳判断（同时设置不同的颜色。已开始的事件显示绿色，未开始的事件显示黑色，过去的事件显示灰色）
入冉心
94 0
兜里只有三分钱~
无限滚动-放上暂停滚动jsdemo效果示例（真理）
无限滚动-放上暂停滚动jsdemo效果示例（真理）
兜里只有三分钱~
42 0
漏刻有时
Echarts链接操作弹出窗口防止重复触发点击事件的解决方案
Echarts链接操作弹出窗口防止重复触发点击事件的解决方案
漏刻有时
125 0
kfuqggqbtiyea
自下而上自动循环滚动
自下而上自动循环滚动
kfuqggqbtiyea
114 0
自下而上自动循环滚动
DieHunter1024
|
JavaScript
JS案例：小球拖动，记录轨迹，并原路返回
JS案例：小球拖动，记录轨迹，并原路返回
DieHunter1024
139 0