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

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

你瞧我正在自动变换颜色哦

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[i].style.color=color[parseInt(Math.random() * color.length)];//设置样式

}

}

setInterval("changeColor()",200);//每0.2秒变换一种颜色

你瞧我正在自动变换颜色哦

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

js文字特效制作js文字闪烁与文字变色效果

js实现文字颜色闪烁

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();

JS实现文字自动变换颜色第三则代码:

文字自动变换颜色示例
文字自动变换颜色演示

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);

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

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值