JS实现文字闪烁自动变换颜色代码3则

当网页中某处文字需要不停闪烁加强醒目效果的时候，我们很容易想到用javascript来实现，没错，这个实现起来并不算复杂，下面我们就来分享3则比较简洁的文字自动闪烁特效代码。JS实现文字自动变换颜色第一则代码：

Markup

<html> 
<head> 
<title>你瞧我正在自动变换颜色哦</title> 
<script type="text/javascript"> 
	function changeColor(){ 
	var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray|#f60";//定义颜色
	color=color.split("|"); //通过split方法生成数组
 	var xuan = document.getElementsByTagName("h2");//获得元素
	for(var i=0;i<xuan.length;i++){
	xuan[i].style.color=color[parseInt(Math.random() * color.length)];//设置样式 

	}

	} 
	setInterval("changeColor()",200);//每0.2秒变换一种颜色
</script> 
</head>
<body> 
<h2>你瞧我正在自动变换颜色哦</h2>
</body> 
</html> 本段代码来自 https://www.yiwuku.com/a/19882.html

JS实现文字自动变换颜色第二则代码：

Markup

<html>    
<head>    
<title>js文字特效制作js文字闪烁与文字变色效果</title>    
</head>    
<body>    
<a id="actext" href="http://www.yiwuku.com"><b>js实现文字颜色闪烁</b></a>    
<script type="text/javascript">    
var i = 0;    
function getColor(){    
	i++;    
	switch(i){    
		case 1:return "#ff0000";    
		case 2:return "#ff6600";    
		case 3:return "#3366cc";    
		default:return "black";    
	}    
}    
function colorful(){    
	var o =document.getElementById('actext');    
	o.style.color=getColor();    
	if(i==3)i=0;    
	setTimeout('colorful()',500);    
}    
colorful();    
</script>    
</body>    
</html> 本段代码来自 https://www.yiwuku.com/a/19882.html

JS实现文字自动变换颜色第三则代码：
益吾库

Markup

<html> 
<head> 
<title>文字自动变换颜色示例</title>
<div id="MM">文字自动变换颜色演示</div>
<script type="text/javascript">
var Mcolor=new Array("blue","red","green");
i=0;
var act;
function Change_color()  {
if (i==Mcolor.length)  {i=0;}
document.getElementById("MM").style.color=Mcolor[i];
i++;
}
act=setInterval("Change_color()",500);
</script>
</body>    
</html> 本段代码来自 https://www.yiwuku.com/a/19882.html

通过对比我们不难发现，JS代码实现颜色自动切换实际都用到了定时器，不管用的是setInterval还是setTimeout，基本原理和实现目标几乎都差不多。

<html>
<script>
  window.onload = function() {
    var clock = document.getElementById('clock');
    var color = ['red', 'green', 'yellow', 'blue', 'black', 'gold', 'orange', 'gray', 'pink', 'maroon']; //钟表颜色数组
    setInterval(function() {
      var now = new Date();
      clock.innerHTML = now.getFullYear() + '年' + (now.getMonth()+1) + '月' + now.getDate() + '日' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
      var radom = Math.floor(Math.random() * color.length + 1) - 1; //随机数
      clock.style.color = color[radom]; //设置随机颜色
    }, 1000)
  }
</script>
<body>
<span id="clock" style="font-size:20px;"></span>
</body>
</html>

<!-- js实现变色文字 --><div id="blink">
	<strong>
		<div align="left" style="text-align:center;">
			变色文字效果		</div>
	</strong><strong>
	<script language="javascript"> function changeColor(){ var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray"; color=color.split("|"); document.getElementById("blink").style.color=color[parseInt(Math.random() * color.length)]; } setInterval("changeColor()",200); </script>
	</strong></div>

发表评论 取消回复

发表评论取消回复