• 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>

  • 相关阅读:
    OpenCV-C++ 图像上采样和降采样
    OpenCV-C++ 图像形态学操作应用-提取水平与垂直线
    OpenCV-C++ 图像形态学操作
    OpenCV-C++ 图像滤波(二)-中值滤波-双边滤波
    OpenCV-C++ 图像滤波(一)-均值滤波-高斯滤波
    OpenCV-C++ 绘制基本形状与编写文字
    OpenCV-C++ 调整图像亮度和对比度
    OpenCV-C++ 图像混合
    Mysql新建表,插入中文时报错“Incorrect string value: 'xE4xBDxA0xE5xA5xBD' for column”问题
    springcloud11 spring cloud config
  • 原文地址:https://www.cnblogs.com/wujunbin/p/7446078.html
Copyright © 2020-2023  润新知