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

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

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

<!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虎康
|
7月前
|
JavaScript
弹框下次触发时还保留上次的触发条件
弹框下次触发时还保留上次的触发条件
博客zhu虎康
40 4
游客mldfis24krfue
|
4月前
|
Kubernetes 监控 安全
在K8S中，滚动更新的过程？
在K8S中，滚动更新的过程？
游客mldfis24krfue
137 0
游客mldfis24krfue
|
4月前
|
Kubernetes 监控 API
在K8S中，滚动更新的过程是什么？
在K8S中，滚动更新的过程是什么？
游客mldfis24krfue
138 0
郏国上
|
7月前
|
Android开发
个人热点蓝条出现和消失时，页面下压和恢复导致页面混乱及蓝条下压页面底部控件看不到的问题
个人热点蓝条出现和消失时，页面下压和恢复导致页面混乱及蓝条下压页面底部控件看不到的问题
郏国上
61 0
Goodluck-dys
|
7月前
|
前端开发 JavaScript
在一张图片上添加鼠标移入和移出事件，并定位图片中的内容
在一张图片上添加鼠标移入和移出事件，并定位图片中的内容
Goodluck-dys
126 1
入冉心
|
JavaScript 前端开发
JavaScript时间戳获取及时间戳判断（同时设置不同的颜色。已开始的事件显示绿色，未开始的事件显示黑色，过去的事件显示灰色）
JavaScript时间戳获取及时间戳判断（同时设置不同的颜色。已开始的事件显示绿色，未开始的事件显示黑色，过去的事件显示灰色）
入冉心
116 0
兜里只有三分钱~
无限滚动-放上暂停滚动jsdemo效果示例（真理）
无限滚动-放上暂停滚动jsdemo效果示例（真理）
兜里只有三分钱~
47 0
漏刻有时
Echarts链接操作弹出窗口防止重复触发点击事件的解决方案
Echarts链接操作弹出窗口防止重复触发点击事件的解决方案
漏刻有时
152 0
游客k7ja6kkd3nere
记录瀑布流布局遇到的一个坑
记录瀑布流布局遇到的一个坑
游客k7ja6kkd3nere
319 0
前端修罗场
|
前端开发 JavaScript
【前端三分钟】锚点自动跟随滚动定位
【前端三分钟】锚点自动跟随滚动定位
前端修罗场
812 0