1前端案例-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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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='http://m.taowanwu.com/v2/labels/post-list?label_id=1008488557' class='blue'><span style='background-color:#009900;color:#FFFFFF;'>玩具</span></a></li>",
"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1008488425'><span style='background-color:#009900;color:#FFFFFF;'>充电宝</span></a></li>",
"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=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='http://m.taowanwu.com/v2/labels/post-list?label_id=1008487241' class='yellow'><span style='background-color:#99BB00;color:#FFFFFF;'>防盗神器</span></a></li>",
"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1008487174'><span style='background-color:#337FE5;color:#FFFFFF;'>耳机</span></a></li>",
"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1008486925' class='red'><span style='background-color:#337FE5;color:#FFFFFF;'>拍照神器</span></a></li>",
"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1008486769#1-0'><span style='background-color:#9933E5;color:#FFFFFF;'>座椅</span></a></li>",
"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1008485100' class='blue'><span style='background-color:#9933E5;color:#FFFFFF;'>毛巾</span></a></li>",
"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1008429439'><span style='background-color:#9933E5;color:#FFFFFF;'>鞋</span></a></li>",
"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1007297688' class='red'><span style='background-color:#9933E5;color:#FFFFFF;'>包包</span></a></li>",
"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1007297013' class='blue'><span style='background-color:#EE33EE;color:#FFFFFF;'>杯子水壶</span></a></li>",
"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1007295396'><span style='background-color:#EE33EE;color:#FFFFFF;'>充电线</span></a></li>",
"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1007294708' class='blue'><span style='background-color:#EE33EE;color:#FFFFFF;'>防污神器</span></a></li>",
"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1007294168'><span style='background-color:#EE33EE;color:#FFFFFF;'>按摩神器</span></a></li>",
"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1007294140'><span style='background-color:#E56600;color:#FFFFFF;'>果汁机</span></a></li>",
"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1007179545' class='yellow'><span style='background-color:#E56600;color:#FFFFFF;'>电子烟</span></a></li>",
"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1006898512'><span style='background-color:#FF9900;color:#FFFFFF;'>电动牙刷</span></a></li>",
"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1007177273'><span style='background-color:#FF9900;color:#FFFFFF;'>笔记本</span></a></li>",
"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=1006898397' class='yellow'><span style='background-color:#009900;color:#FFFFFF;'>减压神器</span></a></li>",
"<li><a href='http://m.taowanwu.com/v2/labels/post-list?label_id=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>
1前端案例-tag标签+随机位置的更多相关文章
- 前端案例分享（一）：CSS+JS实现流星雨动画
目录 引言 1.效果图 2.源码 3.案例解析 4.小问题 5.结语 引言 平常会做一些有意思的小案例练手,通常都会发到codepen上,但是codepen不能写分析. 所 ...
- script标签的位置
1.在我们编写代码的时候,会在页面内使用<script>标签来写JS,虽然理论上script标签的位置放在哪里可以,但是还是有一点区别的. 2.为什么很多人把script标签放在底部: 初 ...
- 前端 ------ 03 body标签中的相关标签
列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <form> 一.列表标签 列表标签分为三种. 1.无序列表&l ...
- 自定义tag标签-实现long类型转换成Date类型
数据库里存储的是bigint型的时间,entity实体中存放的是long类型的标签,现在想输出到jsp页面,由于使用的是jstl标签,而要显示的是可读的时间类型,找来找去有个 fmt:formatDa ...
- 前端之body标签中相关标签（二）
一 列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: a.ul:unordered list,“无序列表”的意思. b.li ...
- DEDECMS5.5/5.6/5.7列表页调用TAG标签（热门标签）的两种方法
DEDECMS5.5/5.6/5.7列表页调用TAG标签的两种方法: 一.DedeCMSv5.6及其以前版本: dedecms默认在列表是无法调用tag标签的,经过各位版主们的帮助,现给大家提供出2种 ...
- dedecms5.7文章页的标签随机插入到内容中并且标签的地址为其标签关联的其他文章地址
dedecms5.7文章页的标签随机插入到内容中并且标签的地址为其他标签关联的文章地址 1 添加2个自定义函数 在dede/include/extend.func.php底部 添加如下代码 //根据文 ...
- 前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型)
前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型) 一丶HTML块级标签 排版标签 p 标签: 段落标签,会自动在段落上下加上空白来分开 p标签 ...
- 前端09 /jQuery标签操作、事件、补充
前端09 /jQuery标签操作.事件.补充 目录 前端09 /jQuery标签操作.事件.补充 1.标签内文本操作 1.1 html标签元素中的所有内容 1.2 text 标签元素的文本内容 2.文 ...
随机推荐
- 安全测试===sqlmap（零）转载
本文转自:https://blog.werner.wiki/sqlmap-study-notes-0/ 感谢作者的整理,如有侵权,立删 零.前言 这篇文章是我学习Sqlmap的用法时做的笔记,记录了S ...
- centos安装--两张光盘
不是有两个ISO吗?你在别的电脑上打开第二个iso,就可以看到里面是openoffice的语言包.你安装的时候出现的提示是找不到“openoffice.org-langpack-zh-TW-3.1.1 ...
- perl多线程tcp端口扫描器(原创)
perl多线程tcp端口扫描器(原创) http://bbs.chinaunix.net/thread-1457744-1-1.html perl socket 客户端发送消息 http://blog ...
- core dump使用方法、设置、测试用例
core dump使用方法.设置.测试用例 http://blog.csdn.net/liuzhuchen/article/details/21975227
- twemproxy 简介、安装配置
twemproxy 简介.安装配置 http://www.xuchanggang.cn/archives/993.html
- iptables 操作
iptables --list 查看列表 iptables删除规则 iptables -nL --line-number Chain INPUT (policy ACCEPT)num target p ...
- JS常用操作方法
1.splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. 注释:该方法会改变原始数组. 1 <script type="text/javascript"& ...
- javascript方法--call()
关于call方法,以前经常看到这个方法,但是也没怎么用心去学习,后来觉得不行,所以知识在一点一点补~ 今天对自己学习call方法做一下总结 其实,学了call方法,会发现call跟apply其实是很像 ...
- ActiveMQ基于JMS的pub/sub传播机制
原文地址:[ActiveMQ实战]基于JMS的pub/sub传播机制 发布订阅模型 就像订阅报纸,我们可以选择一份或者多份报纸.比如:北京日报.人民日报.这些报纸就相当于发布订阅模型中的topic.如 ...
- python import模块的搜索路径
当在py代码中import所依赖的模块时, python是从哪里找到这些模块呢,即模块的搜索路径是啥? 默认情况下,Python解释器会搜索当前目录.所有已安装的内置模块和第三方模块,搜索路径存放在s ...