效果图
[HTML] 纯文本查看 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>javascript实现随机颜色的按钮式Tag标签</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<style type="text/css">
#div1 {
width:400px;
height:400px;
}
#div1 li {
list-style:none;
float:left;
margin:10px 10px;
text-shadow:1px 2px 1px #000;
box-shadow:0 7px 0 rgba(158,158,158,0.32);
line-height:36px;
border-radius:10px;
}
#div1 a {
padding:12px 12px;
font-size:12px;
border-radius:13px;
color:#fff;
text-decoration:none;
}
</style>
</head>
<body>
<div id="div1">
<h1>javascript实现随机颜色的按钮式Tag标签:</h1>
<li>
<a href="#">Android</a></li>
<li>
<a href="#">iOS开发</a></li>
<li>
<a href="#">Linux/Unix</a></li>
<li>
<a href="#">javascript</a></li>
<li>
<a href="#">html5</a></li>
<li>
<a href="#">ajax</a></li>
<li>
<a href="#">mysql</a></li>
<li>
<a href="#">python</a></li>
<li>
<a href="#">php</a></li>
<li>
<a href="#">后台模板</a></li>
<li>
<a href="#">前端模板</a></li>
<li>
<a href="#">java</a></li>
</div>
<script>
var tagcolor = document.getElementById("div1").getElementsByTagName("a");
for (i = 0; k = tagcolor.length, i < k; i++) {
var str = "0123456789ABCDEF";
var t = "#";
for (j = 0; j < 6; j++) {
t = t + str.charAt(Math.random() * str.length);
}
tagcolor[i].style.background = t;
}
</script>
</body>
</html> | 
发表于 2020-3-4 22:20
