码迷,mamicode.com
首页 > 其他好文 > 详细

字体颜色动态变换

时间:2018-12-22 19:06:59      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:设置   mat   nload   循环   image   gray   size   round   切割字符串   

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); 

 

谢谢浏览!

字体颜色动态变换

标签:设置   mat   nload   循环   image   gray   size   round   切割字符串   

原文地址:https://www.cnblogs.com/pzw23/p/10162025.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!