JS实现文字闪烁自动变换颜色代码3则
当网页中某处文字需要不停闪烁加强醒目效果的时候，我们很容易想到用javascript来实现，没错，这个实现起来并不算复杂，下面我们就来分享3则比较简洁的文字自动闪烁特效代码。JS实现文字自动变换颜色第一则代码：
<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>JS实现文字自动变换颜色第二则代码：
<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>JS实现文字自动变换颜色第三则代码：
<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>通过对比我们不难发现，JS代码实现颜色自动切换实际都用到了定时器，不管用的是setInterval还是setTimeout，基本原理和实现目标几乎都差不多。
