qiu 文字彩色+闪动代码

发布网友发布时间：2022-12-03 09:46

共1个回答

热心网友时间：2023-11-17 18:58

总共两个文件，将他们存到同一目录下，然后访问index.html文件即可以看到效果

文件一：caisewenzi.htc

<PUBLIC:COMPONENT URN="rainbow" name="darainbow()"/>
<PUBLIC:ATTACH EVENT = "oncontentready" ONEVENT ="beginIt()"/>
<SCRIPT language="JAVASCRIPT">
var Kill_ID=null;
var internalValue;
var originalValue;
function putValue(){
element.innerHTML=internalValue;
encapsulate();
startSwirl();
}
function eventHandler(){
clearInterval(Kill_ID);
internalValue=element.value;
element.detachEvent("onpropertychange",eventHandler);
if(event.propertyName=="value"){
element.innerHTML=internalValue;
putValue();
} else startSwirl();
element.attachEvent("onpropertychange",eventHandler);
}
function swirl(){
var I;
I=ran(internalValue.length-1,0);
if(element.children(I) != null)element.children(I).style.color=randomColor();
}
function startSwirl(){
if (element.swirlInterval == null)
element.swirlInterval=50;
if ((internalValue!=null) && (element.swirlInterval!=0))
Kill_ID=setInterval(swirl,element.swirlInterval);
}
function encapsulate(){
var I;
var tempStr="";
for (I=0; I < internalValue.length; I++){
tempStr += "<DIV style=\"color:"+randomColor()+"\">" + internalValue.substr(I,1) + "</DIV>";
}
innerHTML=tempStr;
}
function ran(upperbound, lowerbound){
return(parseInt((upperbound - lowerbound + 1) * Math.random() + lowerbound));
}
function randomColor(){
var R=ran(255,0);
var G=ran(255,0);
var B=ran(255,0);
R=R.toString(16);
G=G.toString(16);
B=B.toString(16);
if (R.length==1)R="0"+R;
if (G.length==1)G="0"+G;
if (B.length==1)B="0"+B;
return("#"+R+G+B);
}
function beginIt(){
internalValue=element.value;
originalValue=element.innerHTML;
if (internalValue==null)
internalValue=element.innerHTML;
putValue();
element.attachEvent("onpropertychange",eventHandler);
}
function clearIt(){
clearInterval(Kill_ID);
element.detachEvent("onpropertychange",eventHandler);
element.innerHTML=originalValue;
}
</script>

文件二：index.html

<html>
<head><title>彩色文字演示</title>
<style>
.flashwords{behavior:url("caisewenzi.htc");}
</style>
</head>
<body>
<span class="flashwords">彩色文字</span>
</body>
</html>