zoukankan      html  css  js  c++  java
  • 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=" 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>

  • 相关阅读:
    Godaddy注册的域名转发、转向教程
    Flash的attachMovie方法
    js出现中文乱码及VS打开js文件乱码的解决方法
    sql2005 COM+ 目录要求 (警告)
    flash读取不同格式xml
    Flash xml 中文乱码
    IXWebHosting的URL转向设置
    引用项目类库时dll.refresh文件的影响
    flash自定义函数
    Microsoft SQL Server 2005 整合、集成SP3方法
  • 原文地址:https://www.cnblogs.com/wujunbin/p/7446078.html
Copyright © 2011-2022 走看看