字体颜色动态变换
Posted pzw23
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了字体颜色动态变换相关的知识，希望对你有一定的参考价值。
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);
谢谢浏览！
以上是关于字体颜色动态变换的主要内容，如果未能解决你的问题，请参考以下文章
PB 怎么动态(用代码)改变数据窗口的属性(例如窗体的字体大小,字体颜色,背景颜色)