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