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);
谢谢浏览！
原文地址：https://www.cnblogs.com/pzw23/p/10162025.html
时间： 2024-08-11 11:49:01