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.文 ...
随机推荐
- perl 函数参数传递与返回值（一）
perl 函数参数传递与返回值(一) http://www.cnblogs.com/tobecrazy/archive/2013/06/11/3131887.html
- 使用JMX工具远程监控tomcat配置
使用JMX工具远程监控tomcat,在tomcat启动时添加配置参数: -Dcom.sun.management.jmxremote -Dcom.sun.management.jmxremote.po ...
- ArcGIS Server 基于Token安全验证
写在前面:只使用token并不能起到安全验证的作用,ArcGIS Server文件夹的权限是开放的,我们不需要登录Server平台即可访问服务,所以我们应该将Token验证和文件夹的安全性结合起来使用 ...
- Leetcode 之Add Binary（29）
比较简单,细节:先将字符串翻转,注意进位. string addBinary(string a, string b) { string result; int len = a.size() > ...
- javascript 实现图片放大镜功能
淘宝上经常用到的一个功能是利用图片的放大镜功能来查看商品的细节 下面我们来实现这样一个功能吧,原理很简单: 实现一个可以随鼠标移动的虚框 在另外一个块中对应显示虚框中的内容 实现思路: 虚框用css中 ...
- git报错The authenticity of host 'github.com (13.229.188.59)' can't be established. RSA key fingerprint is。。。
额,记录下,.ssh/rsa_pub的内容都加到githup.com配置来,为什么还是报这个错呢. 最后发现是个小白问题,如下图 只需要输入yes就ok.
- Word Search——经典题（还没细看）
Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from l ...
- Ubuntu 16.04 apt-get搭建LAMP环境
本文重点介绍在Ubuntu中使用apt-get安装LAMP(Ubuntu 16.04,Apache2.4.18,mysql5.7.12,php7.0.4)环境,所以不再介绍如何安装Ubuntu. 安装 ...
- [BZOJ5305][Haoi2018]苹果树 组合数
题目描述 小 C 在自己家的花园里种了一棵苹果树, 树上每个结点都有恰好两个分支. 经过细心的观察, 小 C 发现每一天这棵树都会生长出一个新的结点. 第一天的时候, 果树会长出一个根结点, 以后每一 ...
- AC日记——Dynamic Ranking 洛谷 P2617
Dynamic Ranking 思路: 可持久化树状数组: 代码: #include <bits/stdc++.h> using namespace std; #define maxn 1 ...