js实现随机颜色显示tag标签的代码(图文)

发布时间:2020-10-14编辑:脚本学堂
本文介绍下,用javascript实现的可以随机颜色显示tag标签的一段代码,有需要的朋友参考下。

随机颜色显示tag标签,很酷很好看。

1,html内容部分
 

复制代码 代码示例:
<span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> 
<span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> 
<span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> 
<span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> 
<span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> 
<span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> 
<span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> 
<span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> 
<span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> 
<span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> 
<span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> 

2,js代码部分
 

复制代码 代码示例:
<script>
var obj = document.getElementsByTagName("span");
for(i=0;i<obj.length;i++)
{
var str = "0123456789abcdef";
var t = "#";
for(j=0;j<6;j++)
{t = t+ str.charAt(Math.random()*str.length);}
obj[i].style.color=t; 
}
</script>

效果如下图:
随机颜色tag标签

3,完整代码
 

复制代码 代码示例:
<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312" />
    <title>tag标签用随机颜色显示-www.jb200.com</title>
<script>
/**
* 随机颜色代码
* edit by www.jb200.com
*/
var obj = document.getElementsByTagName("span");
for(i=0;i<obj.length;i++)
{
var str = "0123456789abcdef";
var t = "#";
for(j=0;j<6;j++)
{t = t+ str.charAt(Math.random()*str.length);}
obj[i].style.color=t; 
}
</script>
</head>
<body>
<span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> 
<span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> 
<span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> 
<span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> 
<span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> 
<span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> 
<span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> 
<span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> 
<span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> 
<span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> 
<span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> 
</body>
</html>