Saber 酱的抱枕

单独查看demo

比较简单的一个小玩意，昨天做的网站里需要这个类似的功能，于是改了下单独发出来。 代码如下：

<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;

制作色彩不同的tag标签