[原创] JavaScript实现简单的颜色类标签云
Posted 扫地僧人的日常
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[原创] JavaScript实现简单的颜色类标签云相关的知识，希望对你有一定的参考价值。
效果预览：
源码分享：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 300px;
border: 1px solid #d5d5d5;
padding: 10px;
margin: 100px auto;
overflow: hidden;
}
#box a{
display: block;
float: left;
height: 30px;
line-height: 30px;
padding: 0 10px;
color: #fff;
background: #000;
margin: 0 10px 10px 0;
text-decoration: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: "Microsoft YaHei";
}
</style>
</head>
<body>
<div id="box">
<a href="#">Java</a>
<a href="#">Css</a>
<a href="#">HTML</a>
<a href="#">javascript</a>
<a href="#">前端优化</a>
<a href="#">前端开发</a>
<a href="#">Java</a>
<a href="#">Css</a>
<a href="#">HTML</a>
<a href="#">JavaScript</a>
<a href="#">前端优化</a>
<a href="#">前端开发</a>
<a href="#">Java</a>
<a href="#">Css</a>
<a href="#">HTML</a>
<a href="#">JavaScript</a>
<a href="#">前端优化</a>
<a href="#">前端开发</a>
</div>
<script>
window.onload = function () {
//获取节点
var oBox = document.getElementById(\'box\');
var aList = oBox.getElementsByTagName(\'a\');
for(var i=0;i<aList.length;i++)
{
//设置背景颜色
aList[i].style.background = randColor();
};
console.log(randColor());
};
//随机色方法
function randColor()
{
var colors = Math.floor(Math.random() * (255 * 255 * 255));
colors = colors.toString(16);
if( colors.length < 6 )
{
colors = \'0\'+colors;
}
return \'#\'+colors;
};
</script>
</body>
</html>
以上是关于[原创] JavaScript实现简单的颜色类标签云的主要内容，如果未能解决你的问题，请参考以下文章