<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>颜色渐变的文字</title>
<script language="javascript">
<!--计算每个字的变化量-->
function Delta(sHex1,sHex2,iNum){//sHex1、sHex2为16进制的颜色代码，iNum为整段文字长度
var iHex1=parseInt("0x"+sHex1);//parseInt() 函数可解析一个字符串，并返回一个整数。将16进制的颜色代码转为10进制
var iHex2=parseInt("0x"+sHex2);
return(iHex2-iHex1)/(iNum-1);
}
function Colorful(sText,sColor1,sColor2){//sText：正文；sColor1:起始颜色；sColor2:结束颜色
<!--如果只有1个字符，渐变无从谈起，直接输出并返回-->
if(sText.length<=1){
document.write("<font style='color:#"+sColor1+"';>"+sText+"</font>");
return;
}
var fDeltaR=Delta(sColor1.substring(0,2),sColor2.substring(0,2),sText.length);//substring() 方法用于提取字符串中介于两个指定下标之间的字符。计算R值的变化量
var fDeltaG=Delta(sColor1.substring(2,4),sColor2.substring(2,4),sText.length);
var fDeltaB=Delta(sColor1.substring(4,6),sColor2.substring(4,6),sText.length);
var sColorR=parseInt("0x"+sColor1.substring(0,2));//将sColor1转为10进制
var sColorG=parseInt("0x"+sColor1.substring(2,4));
var sColorB=parseInt("0x"+sColor1.substring(4,6));
<!--for循环，每输出一个字符，颜色的3个分量都相应变化-->
for(var i=0;i<sText.length;i++){
document.write("<font style='color:rgb("+Math.round(sColorR)+","+Math.round(sColorG)+","+Math.round(sColorB)+")';>"+sText.substring(i,i+1)+"</font>");
sColorR+=fDeltaR;//sColorR=sColorR+fDeltaR:R+变化量
sColorG+=fDeltaG;
sColorB+=fDeltaB;
}
}
Colorful("春节（Spring Festival）中国民间最隆重最富有特色的传统节日。","FF3300","3366FF");
</script>
</head>
<body>
</body>
</html>
运行结果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
