Effect preview:
Source Sharing:
<! DOCTYPE html>
<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>
<body>
<div id= "box" >
<a href= "#" >Java</a>
<a href= "#" >Css</a>
<a href= "#" >HTML</a>
<a href= "#" >JavaScript</a>
<a href= "#" > Front-end optimization </a>
<a href= "#" > Front-end development </a>
<a href= "#" >Java</a>
<a href= "#" >Css</a>
<a href= "#" >HTML</a>
<a href= "#" >JavaScript</a>
<a href= "#" > Front-end optimization </a>
<a href= "#" > Front-end development </a>
<a href= "#" >Java</a>
<a href= "#" >Css</a>
<a href= "#" >HTML</a>
<a href= "#" >JavaScript</a>
<a href= "#" > Front-end optimization </a>
<a href= "#" > Front-end development </a>
</div>
<script>
Window.onload = function () {
Get node
var OBox = document.getElementById (' box ');
var alist = obox.getelementsbytagname (' a ');
for (Var i=0;i<alist.length;i++)
{
Set Background color
Alist[i].style.background = Randcolor ();
};
Console.log (Randcolor ());
};
Random Color method
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>
Original JavaScript implements a simple color class tag cloud