1前端案例-tag標籤+隨機位置

時間 2019-11-11

標籤前端案例 tag 標籤隨機位置简体版

原文原文鏈接

tag標籤隨機位置+js數組隨機+js添加一段html代碼段

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">css

<html xmlns="http://www.w3.org/1999/xhtml">html

<head>數組

<title>球形導航</title>dom

</head>函數

<body>post

<div id="xiaolin" style="width: 260px;margin: 0 auto;);">spa

ul,htm

li {ip

margin: 0px;

padding: 0px;

}

ul li {

padding-right: 5px;

margin-bottom: 5px;

display: inline-block;

float: left;

}

span {

border-radius: 2px;

padding: 2px;

}

</style>

</ul>

</div>

</body>

var Aarrs = [

"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1008488557' class='blue'>玩具</a></li>",

"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1008488425'>充電寶</a></li>",

"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1008488383' class='red'>手機支架</a></li>",

"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1008487241' class='yellow'>防盜神器</a></li>",

"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1008487174'>耳機</a></li>",

"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1008486925' class='red'>拍照神器</a></li>",

"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1008486769#1-0'>座椅</a></li>",

"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1008485100' class='blue'>毛巾</a></li>",

"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1008429439'>鞋</a></li>",

"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1007297688' class='red'>包包</a></li>",

"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1007297013' class='blue'>杯子水壺</a></li>",

"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1007295396'>充電線</a></li>",

"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1007294708' class='blue'>防污神器</a></li>",

"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1007294168'>按摩神器</a></li>",

"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1007294140'>果汁機</a></li>",

"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1007179545' class='yellow'>電子煙</a></li>",

"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1006898512'>電動牙刷</a></li>",

"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1007177273'>筆記本</a></li>",

"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1006898397' class='yellow'>減壓神器</a></li>",

"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1006849833'>無人機</a></li>"

];

function randomsort(a, b) {

return Math.random() > .5 ? -1 : 1;

//用Math.random()函數生成0~1之間的隨機數與0.5比較，返回-1或1

}

Aarrs.sort(randomsort);

Aarrs2 = [];

var ul = document.getElementById("tags");

for(var i = 0; i < Aarrs.length; i++) {

Aarrs2 += Aarrs[i];

}

var ul = document.getElementById("tags");

ul.innerHTML = Aarrs2;

</script>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。