纯js写一个文字颜色多样化的例子

js代码

<script language="javascript">
	function Delta(sHex1,sHex2,iNum)
	{
		//计算每个字的变化量
		var iHex1=parseInt("0x"+sHex1);
		var iHex2=parseInt("0x"+sHex2);
		return(iHex2-iHex1)/(iNum-1);
	}
	function Colorful(sText,sColor1,sColor2)
	{
		if (sText.length<=1)
		{
			//如果只有一个字符,渐变无从谈起,直接输出并返回
			document.write("<font style='color:#"+sColor1+";'>"+sText+"</font>");
			return;
		}
		//RBG三色分离,分别获取变化的小量delta
		var fDeltaR=Delta(sColor1.substring(0,2),sColor2.substring(0,2),sText.length);
		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));
		var sColorG=parseInt("0X"+sColor1.substring(2,4));
		var sColorB=parseInt("0x"+sColor1.substring(4,6));
		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>");
			//每输入一个字符,颜色的三个变量都相应的变化
			//当字符输出完成时,正好由是scolor1变成scolor2
			sColorB+=fDeltaB;
			sColorG+=fDeltaG;
			sColorR+=fDeltaR;
		}
	}
	Colorful("学哥是胖子,蔡聪明是小胖,小胖就是冠军,有一天,胖子看见了小胖,所以看上了小胖,从那个时候开始,天天想着小胖,想打她和骂她,哈哈哈哈哈哈","FF3300","3366FF");
	</script>

发布了10 篇原创文章 · 获赞 13 · 访问量 349

猜你喜欢

转载自blog.csdn.net/weixin_46483221/article/details/104716912