教程集 > 脚本编程 > javascript > 正文 js实现随机颜色显示tag标签的代码(图文)

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

发布时间：2014-12-31 编辑：jiaochengji.com

本文介绍下，用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.jiaochengji.com</title>

<script> 

/**

* 随机颜色代码

* edit by www.jiaochengji.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>

您可能感兴趣的文章：
js实现随机颜色显示tag标签的代码(图文)
jquery实现的随机多彩tag标签随机颜色和字号大小效果
 jquery随机多彩tag标签实现代码
 javascript实现隔行变色函数代码一例
 dedecms列表页调用当前文章tag标签的方法
 dedecms模板实现彩色TAG的方法
 js与css 标签页效果的代码分享(图文)
php实现标签云的一段代码
 Photoshop27种图层混合模式使用经验分析
 Photoshop27种图层混合模式运用经验技巧

上一篇：js实现对中文、英文混合词语进行分词的实例分享下一篇：javascript标签页翻动效果(实例分享)(图文)

[关闭]

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

最近更新

浏览排行