javascript实现ul中列表项随机排列
方法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中列表项随机排列的更多相关文章
- CSS中列表项list样式
CSS列表属性 属性 描述 list-style-属性 用于把所有用于列表的属性设置于一个声明中. list-style-image 将图象设置为列表项标志. list-style-position ...
- (转) Wp7 list 中列表项多样化的解决方案-Custom DataTemplateSelector
本文转自: http://www.cnblogs.com/sonyye/archive/2012/03/03/2378825.html 在这篇文章中,我将解释如何在Windows Phone 7中创建 ...
- 简单jQuery实现选项框中列表项的选择
这段代码非常的简单,仅仅作为自己的一个小小的记录! ok,先上一个简单的图例,效果如下(注意:这只是一个简单的例子,不过可以根据这个简单的例子,变化出更为复杂的效果)! 代码也非常的简单,如下所示(注 ...
- 利用JavaScript去掉数组中重复项
利用JavaScript的object的特性,我们可以非常容易的实现将一个数组的重复项去掉. object的特性是:key一定是唯一的. 把数组重复项去掉: 1 将数组转换成一个object对象,数组 ...
- 如何修改html中列表项li所显示的圆点的颜色?,以及相关样式的设定
这是li标签自带的圆点的颜色改变,代码如下: .centerbt li{ content:"."; color:gray; } 在标签li后面加入“@”符号,这里都会使用posit ...
- 从0开始学FreeRTOS-(列表与列表项)-3
# FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像. 在`FreeRTOS`中,列表与列表项使用得非常多 ...
- 从0开始学FreeRTOS-(列表&列表项)-6
# FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像. 在FreeRTOS中,列表与列表项使用得非常多,是Free ...
- FreeRTOS列表和列表项
FreeRTOS中的列表和列表项类似于数据结构中的链表和节点: 相关的文件是list.c和list.h两个文件: List_t列表结构体 具体定义如下: /* * Definition of the ...
- javascript和jquery中获取列表的索引
网页中的图片预览一般都需要获取图片列表的索引,或则图片对应的标签的索引,以此达到点击相应的标签获取索引,显示相应的图片 列表有很多种表达的方式,一种是 <ul> <li>苹果& ...
随机推荐
- PPT页面动画制作
因为武汉新型冠状肺炎的影响,今年自从2月3号开工以来,就在家办公.我的任务刚好是安排做PPT,虽说之前做过PPT,但大家都知道,作为一个IT测试工程师,更多的是测试工作,只有在培训,还有年终汇报的时候 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:设置浮动和偏移
<!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...
- Linux centosVMware Tomcat介绍、安装jdk、安装Tomcat
一.Tomcat介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache.Sun和其他一些公司及个人共同开 ...
- 在ng-repeat 中使用 ng-click
angular 中使用 ng-repeat 过程中,有时需要绑定 事件 click ,使用ng-click ,但是并没有效果,此时应该使用 data-ng-click 替代 ng-click ,并且 ...
- Codeforces1301B. Motarack's Birthday
题意是说给你一串数组,其中-1代表未知,求相邻两个数之差的绝对值最小,-1可以由k赋值,先考虑-1的情况,把k解出来,转换一下,就是绝对值之差最小情况,|k-a|,|k-b|,|k-c|,要使最大的最 ...
- 「luogu1613」跑路
传送门 Luogu 解题思路 对于所有可以用 \(2^k\) 形式表示的 \(dis(i,j)\),将\(i,j\)之间的 \(dis\) 置为 \(1\),可以用倍增 \(\text{Floyd}\ ...
- Centos7 忘记密码解决方法
一.Centos7 忘记密码解决方法 1.进入单用户模型 重启 Linux 系统主机并出现引导界面时,按下键盘上的 e 键进入内核编辑界面 然后按向下键,找到以“Linux16”开头的行,在该行的最后 ...
- 提高unigui开发效率的两个方法(02)
1.编译时自己退出运行的程序. 在做unigui开发时,每次编译运行时,unigui的应用都会在后台运行,每次重新编译时都必须手工在任务栏里将应用退出才行,非常麻烦,可以在项目编译的参数里加上杀进程的 ...
- Wepy框架和mpVue框架的比较及使用mpVue框架需要注意的点
Wepy框架 它是一款类Vue框架,在代码风格上借鉴了Vue,本身和Vue没有任何关系. mpVue框架 它是从整个Vue的核心代码上经过二次开发而形成的一个框架,相当于是给Vue本身赋能,增加了开发 ...
- Java 后端压缩图片
import java.io.*;import java.util.Date;import java.awt.*;import java.awt.image.*;import javax.imagei ...