字体颜色动态变换

痞子三分冷 提交于 2020-01-26 13:20:44

js设置html字体颜色动态变换

一、如果只是两种颜色轮换

<head>
<script>
function changecolor()
{
    var b=document.getElementById("a").style.color;
    if(b=="red"){document.getElementById("a").style.color="yellow";}
    else {document.getElementById("a").style.color="red";}
}
setInterval("changecolor()",250)//设置循环速度
</script>
</head>
<body>
<h4 id="a"style="color:red;"> 你好!很高兴见到你!</h4>
</body>

 

效果看右边:录制屏幕的工具有点卡,正常的是红黄交替。
这种情况适合少的,多了就麻烦了。

二、创建数组

1、

<html>
<head>
<script>
function changecolor()
{
   var col=new Array();
col[0]="yellow";
col[1]="blue";
col[2]="green";
col[3]="gray";
document.getElementById('a').style.color=col[parseInt(Math.random() * col.length)];
}
setInterval("changecolor()",250)
</script>
</head>
<body onload="changecolor()">
<h4 id="a"style="color:red;">好久不见!</h4>
</body>
</html>

 

效果看右边:Math.random()函数产生0.0~1.0的随机数,与数组的长度相乘取整。
2、也可以用split()函数切割字符串做成数组
function changeColor()
{ 
var color="blue|gray|green|red|yellow|white"; 
color=color.split("|"); //在“|”处切割
document.getElementById("a").style.color=color[parseInt(Math.random() * color.length)]; 
} 
setInterval("changeColor()",250); 

 

谢谢浏览!

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!