字体颜色动态变换

最新推荐文章于 2022-05-25 14:47:57 发布

weixin_30611509

最新推荐文章于 2022-05-25 14:47:57 发布

阅读量446

点赞数

文章标签： c#

原文链接：http://www.cnblogs.com/pzw23/p/10162025.html

版权

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

weixin_30611509

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
字体颜色动态变换

js设置html字体颜色动态变换一、如果只是两种颜色轮换<head><script>function changecolor(){ var b=document.getElementById("a").style.color; if(b=="red"){document.getElementById("a").style.co...
复制链接

扫一扫