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.文 ...
随机推荐
- CentOS7手动编译安装内核4.11.7
1. 进入/usr/src/目录 cd /usr/src 2. 下载内核源码,网址:https://www.kernel.org wget https://cdn.kernel.org/pub/lin ...
- handle_level_irq 与handle_edge_irq 的区别【转】
转自:http://blog.csdn.net/xavierxiao/article/details/6087277 版权声明:本文为博主原创文章,未经博主允许不得转载. Linux 里, handl ...
- Yii 1.1.17 一、安装、目录结构、视图、控制器、扩展自定义函数
这几天了解了一下Yii框架,以简单的博客项目实战入门.大致的实现流程做个记录. 一.Yii 安装与环境检测 从 www.yiiframework.com 获取一份Yii的拷贝,解压到 /wwwroot ...
- 浅析linux内核中timer定时器的生成和sofirq软中断调用流程【转】
转自:http://blog.chinaunix.net/uid-20564848-id-73480.html 浅析linux内核中timer定时器的生成和sofirq软中断调用流程 mod_time ...
- OC 07 类的扩展
1.NSDate的使用 NSDate是Cocoa中⽤于处理⽇期和时间的基础类,封装了某⼀给定的时刻(含日期,时间,时区) 注意NSLog(@“%@”,nowDate);⽆论你是哪个时区的时间,打印时总 ...
- 后台传入的boolean类型到前台alert为String类型了（解决方法）
后台代码: // 进入仪器list界面之前查看 是否是科研处人员 SessionContainer sc = (SessionContainer) session.getAttribut ...
- Django-form組件
Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 一.创建Form类 1 2 3 4 5 6 7 ...
- srcache_nginx+redis构建缓存系统
http://www.ttlsa.com/nginx/construction-of-srcache_nginx_redis-caching-system/ http://blog.csdn.net/ ...
- gitlab和github的区别
先说一下相同点,二者都是基于web的Git仓库,在很大程度上GitLab是仿照GitHub来做的,它们都提供了分享开源项目的平台,为开发团队提供了存储.分享.发布和合作开发项目的中心化云存 ...
- AC日记——天天爱跑步 洛谷 P1600
天天爱跑步 思路: 树上差分+分层动态线段树: (伏地膜,跪烂xxy) 代码: #include <bits/stdc++.h> using namespace std; #define ...