利用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
投稿猜你喜欢
前言对话框是很常用的组件 ， 在很多地方都会用到，一般我们可以使用自带的alert来弹出对话框，但是假如是设计出的图该怎么办呢 ，所以我们需- 09年的电影缓缓的落下帷幕，以及新年伊始，轰轰烈烈催人癫狂的《阿凡达》。整年里，最让人我记忆深刻的还是《飞屋历险记》。Carl与Ellie被
- DROP PRIMAY DEY用于取消主索引。注释：在MySQL较早的版本中，如果没有主索引，则DROP PRIMARY KEY会取消表中的
- 本文实例讲述了JavaScript观察者模式(publish/subscribe)原理与实现方法。分享给大家供大家参考，具体如下：观察者模式
- 1、csv简介CSV (Comma Separated Values) ，即逗号分隔值（也称字符分隔值，因为分隔符可以不是逗号），是一种常用
- 1 前言在工作中时常会有繁重的文案工作，接触了python 之后，就会觉得这个比较简单了，python 操作word 和 excel 是比较
- 目录通过与 OpenCV 模板匹配的 OCR信用卡 OCR 结果总结今天的博文分为三个部分。 在第一部分中，我们将讨论 OCR-A 字体，这
- 前言大家好，今天很开心有机会跟大家分享最近几年阿里在低代码领域的思考和实战。我是力皓，目前已经在前端和后端岗位工作了十多年了，近 3 年专注
- 项目中需要根据不同业务进行分库，首先是将业务不同业务映射到不同过的数据库( biz --> db，可能存在多对一情况)，查看sprin
- 本文实例讲述了python简单读取大文件的方法。分享给大家供大家参考，具体如下：Python读取大文件（GB级别）采用的办法很简单：with
- python之循环遍历关于循环遍历大家都知道，不外乎for和while，今天我在这写点不一样的循环和遍历。在实践中有时会遇到删除列表中的元素
- 一、初始化主界面import pygamepygame.init()screen = pygame.display.set_mode((50
- 目前，我们要在网页中使用圆角效果，总是通过切图然后嵌套很多div，用背景来实现圆角效果。对于前端开发工程师来说，圆角的确是一个让人又爱又恨的
- 经常为学校的各种刷分而发愁，得知开学无望，日后还要刷课，索性自动化一次，学而不用乃愚昧 聪慧四大模块初始化from selenium imp
- 情景互动广告是指需要广告画面外的物体来参与的广告，例如：ps：这是我收集的，大家慢慢看吧！其中有大多数收集http://www.netnoe
- 【摘 要】 我只是提供我几个我认为有助于提高写高性能的asp.net应用程序的技巧，本文提到的提高asp.net性能的技巧只是一个起步，更多
- 1 Video介绍引用我翻译文档《在HTML5页面中嵌入音频和视频》中的介绍文字：“当今，在网页上嵌入视频且所有用户不管使用任何浏览器或者操
- ASPError Object 这个新增的，内置与ASP 3.0中的对象提供了一个以往版本中没有的专门用来处理错误的对象，这样，我们来操纵错
- 本文实例为大家分享了python实现双色球随机选号的具体代码，供大家参考，具体内容如下双色球随机选号实现代码from random impo
- 这里假定Postgresql数据库已经装好。首先安装依赖的包$ sudo yum install python-devel postgres
