08/21
2015
比较简单的一个小玩意，昨天做的网站里需要这个类似的功能，于是改了下单独发出来。 代码如下：
<div id="wrap">
<a href="">hug_(artist)</a><a href="">single_shoe</a><a href="">豊聡耳神子</a><a href="">東方 東方project 東方プロジェクト touhou Touhou 东方 东方project</a><a href="">百合 レズ</a><a href="">碧眼</a><a href="">青髪 青い髪 水色髪</a><a href="">髪飾り</a><a href="">花 はな フラワー</a><a href="">short_sleeves</a><a href="">short_sleeves</a><a href="">御札</a>
</div>
<style>
#wrap{width: 900px;}
#wrap a{display: inline-block; padding: 0 10px;margin:0 8px 8px 0;font-family: "Microsoft YaHei";font-size: 13px;color: #fff;line-height: 26px;text-decoration: none;border-radius: 2px;}
#wrap a:hover{opacity: 0.8;transition:all .3s;}
</style>
<script>
function setbg (id,allColor) {//参数为容器id和颜色数组
var alla=document.getElementById("wrap").getElementsByTagName("a");
/*如果展示的区域太窄，可以截取字数以控制a标签的长度，以确保一行最少能有2个或几个
for (var i = 0; i < alla.length; i++) {
if(alla[i].innerHTML.length>8){
alla[i].innerHTML=alla[i].innerHTML.substr(0,7);
}
};
*/
//设置背景颜色
var allcolor=allColor;
usedColor=null; //上次用到的颜色
nowColor=null;//当前随机到的颜色
allaBgIndex=0;//给a标签设置背景颜色时，a的索引数字
bgindex = Math.floor((Math.random()*allcolor.length));
usedColor=allcolor[bgindex]; //先随机一个颜色设置为用过的颜色
for (var i = 0; i < 999; i++) {
bgindex = Math.floor((Math.random()*allcolor.length));
nowColor=allcolor[bgindex]; //随机一个颜色
if (usedColor!=nowColor) { //如果当前颜色和上一个用过的颜色不同，则设置背景色
alla[allaBgIndex].style.backgroundColor=nowColor;
usedColor=nowColor;//把这次用的颜色设置为上次用到的
allaBgIndex++;
if (allaBgIndex==alla.length) {//如果a标签已经全部设置了背景颜色
break;
};
};
};
};
setbg ("wrap",["#448EEF","#E95555","#1369C0","#1AB4C1","#F49129","#2C9F42"]);
</script>
主要的功能就是设置相邻的a标签的背景色不重复了，样式上没有什么难度。
注释里有个蛋疼的截取字数的功能，那是昨天在做网站时弄的。当时的展示区域非常小，宽度只有270多px，但是调取的还是文章标题，都不算短。要求一行最少有两个a标签，只好截取了。截取的缺点就是肯定有一些标签宽度是一样的，这显得很死板，展示区域越窄越明显。
display: inline-block;如果相邻的两个元素不对齐，可以使用vertical-align: top;
