案例"/>
1前端案例
tag标签随机位置+js数组随机+js添加一段html代码段
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
<title>球形导航</title>
</head>
<body>
<div id="xiaolin" style="width: 260px;margin: 0 auto;);">
<style type="text/css">
ul,
li {
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 id='tags'>
</ul>
</div>
</body>
<script>
var Aarrs = [
"<li><a href='=1008488557' class='blue'><span style='background-color:#009900;color:#FFFFFF;'>玩具</span></a></li>",
"<li><a href='=1008488425'><span style='background-color:#009900;color:#FFFFFF;'>充电宝</span></a></li>",
"<li><a href='=1008488383' class='red'><span style='background-color:#FFFFFF;color:#FFFFFF;'><span style='background-color:#99BB00;'>手机支</span><span style='background-color:#99BB00;'>架</span></span></a></li>",
"<li><a href='=1008487241' class='yellow'><span style='background-color:#99BB00;color:#FFFFFF;'>防盗神器</span></a></li>",
"<li><a href='=1008487174'><span style='background-color:#337FE5;color:#FFFFFF;'>耳机</span></a></li>",
"<li><a href='=1008486925' class='red'><span style='background-color:#337FE5;color:#FFFFFF;'>拍照神器</span></a></li>",
"<li><a href='=1008486769#1-0'><span style='background-color:#9933E5;color:#FFFFFF;'>座椅</span></a></li>",
"<li><a href='=1008485100' class='blue'><span style='background-color:#9933E5;color:#FFFFFF;'>毛巾</span></a></li>",
"<li><a href='=1008429439'><span style='background-color:#9933E5;color:#FFFFFF;'>鞋</span></a></li>",
"<li><a href='=1007297688' class='red'><span style='background-color:#9933E5;color:#FFFFFF;'>包包</span></a></li>",
"<li><a href='=1007297013' class='blue'><span style='background-color:#EE33EE;color:#FFFFFF;'>杯子水壶</span></a></li>",
"<li><a href='=1007295396'><span style='background-color:#EE33EE;color:#FFFFFF;'>充电线</span></a></li>",
"<li><a href='=1007294708' class='blue'><span style='background-color:#EE33EE;color:#FFFFFF;'>防污神器</span></a></li>",
"<li><a href='=1007294168'><span style='background-color:#EE33EE;color:#FFFFFF;'>按摩神器</span></a></li>",
"<li><a href='=1007294140'><span style='background-color:#E56600;color:#FFFFFF;'>果汁机</span></a></li>",
"<li><a href='=1007179545' class='yellow'><span style='background-color:#E56600;color:#FFFFFF;'>电子烟</span></a></li>",
"<li><a href='=1006898512'><span style='background-color:#FF9900;color:#FFFFFF;'>电动牙刷</span></a></li>",
"<li><a href='=1007177273'><span style='background-color:#FF9900;color:#FFFFFF;'>笔记本</span></a></li>",
"<li><a href='=1006898397' class='yellow'><span style='background-color:#009900;color:#FFFFFF;'>减压神器</span></a></li>",
"<li><a href='=1006849833'><span style='background-color:#009900;color:#FFFFFF;'>无人机</span></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>
转载于:.html
更多推荐
1前端案例
发布评论