方法1

<!DOCTYPE html>
<html lang="en">
<head>
　　<script type="text/javascript">
　　　　window.onload=function(){
　　　　　　var arr = new Array(1,2,3,4,5,6);
　　　　　　var ul = document.getElementsByTagName('ul')[0];
　　　　　　var len1 = arr.length;
　　　　　　var len = len1;
　　　　　　var index = parseInt(Math.random()*len1);
　　　　　　for(var i=0;i<len1;i++){
　　　　　　　　ul.appendChild(ul.children[index]);
　　　　　　　　arr.pop(index);
　　　　　　　　len = arr.length;
　　　　　　　　index = parseInt(Math.random()*len);
　　　　　　}
　　　　};
　　</script>
　</head>　
　<body>
　　<ul>
　　　　<li>苹果</li>
　　　　<li>桔子</li>
　　　　<li>香蕉</li>
　　　　<li>石榴</li>
　　　　<li>桃子</li>
　　　　<li>菠萝</li>
　　</ul>
　</body>
</html>

方法2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
　　window.onload = function(){
　　　　var arr = [['<li>1</li>'],['<li>2</li>'],['<li>3</li>'],['<li>4</li>'],['<li>5</li>'],['<li>6</li>']];
　　　　var result = '';
　　　　var len = arr.length;
　　　　for(var i=0;i<len ;i++){
　　　　　　var rand = parseInt(arr.length*Math.random());
　　　　　　result += arr[rand];
　　　　　　arr.splice(rand,1);
　　　　}
　　　　document.getElementsByTagName("ul")[0].innerHTML= result ;
　　};
　　//arr 数组就是ul里的内容组成的字符串数组
</script>
</head>
<body>
　　<ul></ul>
</body>
</html>

方法3

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
　　window.onload = function(){
　　　　var ul = document.getElementsByTagName("ul")[0];
　　　　var lis = document.getElementsByTagName("li");
　　　　var arr = [];
　　　　for(var i = 0; i < lis.length; i++){
　　　　　　arr.push(lis[i]);
　　　　}
　　　　arr.sort(function(a,b){
　　　　　　/*var rand = Math.random();
　　　　　　if(rand > 0.5) {
　　　　　　　　return 1;
　　　　　　}else if(rand < 0.5){
　　　　　　　　return -1;
　　　　　　} else {
　　　　　　　　return 0;
　　　　　　}*/
　　　　　　return Math.random()>.5 ? -1 : 1;
　　　　　　//通过随机产生0到1的数，然后判断是否大于0.5从而影响排序，产生随机性的效果。
　　　　});
　　　　for(var i = 0; i < arr.length; i++){
　　　　　　ul.appendChild(arr[i]);
　　　　}
　　}
</script>
</head>
<body>
　　<ul>
　　　　<li>1</li>
　　　　<li>2</li>
　　　　<li>3</li>
　　　　<li>4</li>
　　　　<li>5</li>
　　</ul>
</body>
</html>

javascript实现ul中列表项随机排列的更多相关文章

  1. CSS中列表项list样式

    CSS列表属性 属性 描述 list-style-属性 用于把所有用于列表的属性设置于一个声明中. list-style-image 将图象设置为列表项标志. list-style-position ...

  2. (转) Wp7 list 中列表项多样化的解决方案-Custom DataTemplateSelector

    本文转自: http://www.cnblogs.com/sonyye/archive/2012/03/03/2378825.html 在这篇文章中,我将解释如何在Windows Phone 7中创建 ...

  3. 简单jQuery实现选项框中列表项的选择

    这段代码非常的简单,仅仅作为自己的一个小小的记录! ok,先上一个简单的图例,效果如下(注意:这只是一个简单的例子,不过可以根据这个简单的例子,变化出更为复杂的效果)! 代码也非常的简单,如下所示(注 ...

  4. 利用JavaScript去掉数组中重复项

    利用JavaScript的object的特性,我们可以非常容易的实现将一个数组的重复项去掉. object的特性是:key一定是唯一的. 把数组重复项去掉: 1 将数组转换成一个object对象,数组 ...

  5. 如何修改html中列表项li所显示的圆点的颜色？，以及相关样式的设定

    这是li标签自带的圆点的颜色改变,代码如下: .centerbt li{ content:"."; color:gray; } 在标签li后面加入“@”符号,这里都会使用posit ...

  6. 从0开始学FreeRTOS-(列表与列表项)-3

    # FreeRTOS列表&列表项的源码解读     第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像. 在`FreeRTOS`中,列表与列表项使用得非常多 ...

  7. 从0开始学FreeRTOS-(列表&列表项)-6

    # FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像. 在FreeRTOS中,列表与列表项使用得非常多,是Free ...

  8. FreeRTOS列表和列表项

    FreeRTOS中的列表和列表项类似于数据结构中的链表和节点: 相关的文件是list.c和list.h两个文件: List_t列表结构体 具体定义如下: /* * Definition of the ...

  9. javascript和jquery中获取列表的索引

    网页中的图片预览一般都需要获取图片列表的索引,或则图片对应的标签的索引,以此达到点击相应的标签获取索引,显示相应的图片 列表有很多种表达的方式,一种是 <ul> <li>苹果& ...

随机推荐

  1. Spring学习(二）

    IoC 1.Inverse of Control ,控制反转(控制权的翻转) 2.控制:对对象的创建.对对象的属性赋值等一系列操作本来应该是我们做的事情 Java Application : Date ...

  2. springboot 重写 AuthorizationFilter

    原文链接:https://www.cnblogs.com/zeussbook/p/10778532.html

  3. scala的trait执行报错： 错误: 找不到或无法加载主类 cn.itcast.scala.`trait`

    scala的trait执行报错: 错误: 找不到或无法加载主类 cn.itcast.scala.`trait`.Children 原因:包名写成了trait,与trait关键字重名了: package ...

  4. java各种面试问题

    二.Java多线程相关 线程池的原理,为什么要创建线程池?创建线程池的方式: 线程的生命周期,什么时候会出现僵死进程: 说说线程安全问题,什么实现线程安全,如何实现线程安全: 创建线程池有哪几个核心参 ...

  5. 华为平板暴力禁用wifi

    删除以下配置文件及动态链接库: /system/etc/wifi/* /system/etc/permission/*wifi* /system/lib/*wifi*

  6. 转：Entity Framework 5.0 Code First全面学习

    Code First 约定 借助 CodeFirst,可通过使用 C# 或Visual Basic .NET 类来描述模型.模型的基本形状可通过约定来检测.约定是规则集,用于在使用 Code Firs ...

  7. 题解 JSOI2010 找零钱的洁癖

    题解 JSOI2010 找零钱的洁癖 题面 BZOJ 个人体会 van全没有思路... 只能去看题解... 还是个bfs+贪心 不管怎样竟然乱搞过了... 听M_sea小姐姐说她有更正经的做法(线性规 ...

  8. Scrapy 使用 LinkExtractor 提取链接和使用 Exporter 导出数据

    在爬取一个网站时,想要爬取的数据通常分布到多个页面中,每个页面包含一部分数据以及其他页面的链接,提取链接有使用 Selector 和使用 Linkextractor 两种方法. 1.使用Selecto ...

  9. 二 sql语句,常用字段数据类型

    MySQL中常用DDL命令   database definition language  与 DML命令 :  database definition language 操作数据库: 创建数据库 : ...

  10. C# 中[DllImport("user32.dll")]和extern用法和示例----转载

    原文:https://blog.csdn.net/michellehsiao/article/details/7629746         extern 修饰符用于声明在外部实现的方法.extern ...