利用sort()和Math.random()实现元素的随机排列
作者：Mr.Think 来源：Mr.Think的博客 发布时间：2010-10-19 12:42:00
一个随机排列元素的方法, 其实之前是在摄影页面写的一个小效果.
查看演示: 点此查看DEMO
实现方法
利用Math.random()产生随机数, 再通过sort()进行随机排列.
核心代码
function randomFun(){
var h5=document.getElementsByTagName('h5')[0]
var spanItem=document.getElementsByTagName('span');
var random=function(){return Math.random()>0.5 ? -1 : 1};//为sort()传入的随机排列参数
var spanArr=new Array();//用来存放元素的数组
var cssArr=new Array();//用来存放样式值的数组
var k,m;
for(var i=0; i<spanItem.length; i++){
spanArr.push(spanItem[i]);//将元素存入元素数组
cssArr.push(i);//将对应的下标值存入样式值数组
}
spanArr.sort(random);//打乱元素数组排列顺序
cssArr.sort(random);//打乱样式值数组排列顺序
for(k=0; k<spanArr.length; k++){
h5.appendChild(spanArr[k]);//将打乱后的元素重新插入到页面中
}
for(m in cssArr){
spanArr[m].className='color_'+cssArr[m];//将打乱后的样式加给元素
}
}
0
投稿猜你喜欢
- 视觉设计是什么，人们怎么认为它的，自己又是怎么对待和理解它，它的核心价值是什么。视觉设计，冒似很艺术，跟艺术相关的职业，给大多数人的印象是做
- 数组我们已经提到过,对象是无序数据的集合,而数组则是有序数据的集合,数组中的数据(元素)通过索引(从0开始)来访问,数组中的数据可以是任何的
- 如何用WSH获取机器的IP配置信息？我们用VBSCRIPT转换了： Option Explicit Dim&n
- select * from V$NLS_PARAMETERS; SQL> alter session set NLS_DATE_LAN
- 先按照下面的表结构创建mysql_order_by_test数据表，我们用实例一点一点告诉你，MySQL order by的用法。ORDER
请问css如何实现一张图片的倒影。出来的效果就像这样：下面是使用了滤镜来实现倒影的效果：<div style=" width- 下面继续为大家带来XHTML与HTML兼容的16条指引！1.避免将页面声明为XML类型，页面使用UTF-8或者UTF-16字符集。2.在空元
- mysql数据库没有增量备份的机制，当数据量太大的时候备份是一个很大的问题。还好mysql数据库提供了一种主从备份的机制，其实就是把主数据库
- 对于熟悉 C/C++ 或 Java 语言的工程师来说，JavaScript 显得灵活，简单易懂，对代码的格式的要求也相对松散。很容易学习，并
- 简介如果你经常网上冲浪，这样参差不齐的多栏布局，是不是很眼熟啊？类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如 Pinteres
- 准备在以后制作的网站中尝试一些变化，比如：先提交内容，后提示注册/登陆。感觉这样可以绑架更多用户……不想注册再发言？那就先让你上钩发言，然后
- 一、Position1、语法：position:static/ absolute / fixed / relative2、参数：（1）sta
- 如何用SQL 建表？ 如下：CREATE TABLE statement
- 下面的代码是日期函数的一些简单运用，应该不用解释，生成当月的日历，当然你可以根据实际情况进行扩充！效果图：<％@LANGUAGE=&q
- CSS代码更清晰高效的一些经验是许多网页制作者与开发者都关心的问题。但是大概没有什么魔法，可以保证一下就把你的样式表缩小到百分之多少，合理的
- 我页面上有控制了只能输入数字的控件，禁止了输入法切换的，但是搜狗的云输入却控制不了，有没有办法在页面里面禁止它运行啊？发现这玩意儿真的很讨厌
- 除了在 Error 对象和 Errors 集合中说明的提供者错误之外，ADO 本身也将错误返回到运行时环境的异常处理机制之中。使用
- 天极网软件频道的图片切换特效,完全是由XHTML+CSS+JS实现的图片切换特效,弄了好半天啊!!如果您使用或者转载请别忘了加我的一个连接啊
- 最近对 Range 和 Selection 比较感兴趣。基本非 IE 的浏览器都支持 DOM Level2 中的 Range，而 IE 中仅
- 原文地址：30 Days of Mootools 1.2 Tutorials - Day 19 - TooltipsMootools 1.2
