主站
经典论坛
作品集
Think.Pages
博客
维基
桌面
聚合
注册
登录
专长会员
帮助
客服QQ:6650171
经典论坛
«
前台制作与脚本专栏
« 如何将页面元素的排序打乱显示?
‹‹ 上一主题
|
下一主题 ››
发新话题
发布投票
发布商品
发布悬赏
发布活动
发布辩论
发布视频
打印
如何将页面元素的排序打乱显示?
TerranC
[楼主]
我de艾蜜莉
初级会员
帖子
60
体力
108
威望
3
当前
上海 浦东
离线
4 天
发短消息
打分 1
个人网站
1
#
大
中
小
发表于 2008-5-12 16:43
如下列代码,需求是,第一大题和第二大题的顺序是随机排序的,且其所属选项也随机打乱显示。
我的思路是取出某容器内需要打乱的元素进行打乱然后再装入这个容器,在此之前,容器在html加载时的 display 是 none,javascript 输出后将其设置成 block, 但这个的具体实现不知道怎么做。
希望再次征求好的方法。
<!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> </head> <body> <form name="myform" id="myform"> <dl> <dt>第一题</dt> <dd> <ul> <li><input name="item1" type="checkbox" value="1" />1_1</li> <li><input name="item1" type="checkbox" value="2" />1_2</li> <li><input name="item1" type="checkbox" value="3" />1_3</li> <li><input name="item1" type="checkbox" value="4" />1_4</li> <li><input name="item1" type="checkbox" value="5" />1_5</li> <li><input name="item1" type="checkbox" value="6" />1_6</li> </ul> </dd> </dl> <dl> <dt>第二题</dt> <dd> <ul> <li><input name="item1" type="checkbox" value="1" />2_1</li> <li><input name="item1" type="checkbox" value="2" />2_2</li> <li><input name="item1" type="checkbox" value="3" />2_3</li> <li><input name="item1" type="checkbox" value="4" />2_4</li> <li><input name="item1" type="checkbox" value="5" />2_5</li> <li><input name="item1" type="checkbox" value="6" />2_6</li> </ul> </dd> </dl> </form> </body> </html>
提示:您可以先修改部分代码再运行
[
本帖最后由 TerranC 于 2008-5-13 14:52 编辑
]
积分
111
阅读权限
20
性别
男
在线时间
40 小时
注册
2005-8-17
最后登录
2008-7-16
查看个人网站
查看详细资料
TOP
TerranC
[楼主]
我de艾蜜莉
初级会员
帖子
60
体力
108
威望
3
当前
上海 浦东
离线
4 天
发短消息
打分 1
个人网站
2
#
大
中
小
发表于 2008-5-12 18:50
继续寻求解决方案
积分
111
阅读权限
20
性别
男
在线时间
40 小时
注册
2005-8-17
最后登录
2008-7-16
查看个人网站
查看详细资料
TOP
dashzhao
赵勇
银牌会员
帖子
1950
体力
1660
威望
2
当前
广东 深圳
离线
2 天
发短消息
打分 1
个人网站
专长
策划,网站运营
3
#
大
中
小
发表于 2008-5-12 19:08
貌似不装如数组还真不会
这个杀手有点蠢...
积分
1662
阅读权限
70
性别
男
在线时间
628 小时
注册
2007-5-6
最后登录
2008-7-18
查看个人网站
查看详细资料
TOP
TerranC
[楼主]
我de艾蜜莉
初级会员
帖子
60
体力
108
威望
3
当前
上海 浦东
离线
4 天
发短消息
打分 1
个人网站
4
#
大
中
小
发表于 2008-5-13 13:25
顶起来!
积分
111
阅读权限
20
性别
男
在线时间
40 小时
注册
2005-8-17
最后登录
2008-7-16
查看个人网站
查看详细资料
TOP
10dw
小盆友
高级会员
帖子
421
体力
821
威望
0
当前
美洲 美国
发短消息
专长
网页设计,JS,PHP
5
#
大
中
小
发表于 2008-5-13 14:15
js也不要用了吧 那多牛x呀
积分
822
阅读权限
50
性别
男
在线时间
190 小时
注册
2007-7-28
最后登录
2008-7-19
查看详细资料
TOP
zidanezhicong
我爱阿仙奴
高级会员
帖子
441
体力
883
威望
0
当前
广东 深圳
发短消息
个人网站
专长
前端制作
6
#
大
中
小
发表于 2008-5-13 18:47
搞了一个下午,终于可以了,符合楼主需求,兼容ie6,ie7,FF
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>随机排序</title> </head> <script language="javascript"> window.onload=function(){ getQuestion(); setQuestion(); } var arrQuestion=new Array(); function getQuestion(){//初始化 var dls=document.getElementsByTagName("dl"); for(i=0;i<dls.length-2;i++) arrQuestion[i]=i+3;//生成一个数组 function mysort(a,b){ var tmp=Math.round(Math.random()); //生成一个随机数并取整,tmp的值为等于0或1的随机数。 return tmp?a-b:b-a; //根据0或1进行升/降排序 } //随机排序函数 arrQuestion.sort(mysort); //对数组arr进行随机排序 } function setQuestion(){ var oFrag=document.createDocumentFragment(); for(j=0;j<arrQuestion.length;j++){ var questions=document.getElementById("q"+arrQuestion[j]); oFrag.appendChild(questions); } document.body.appendChild(oFrag); } </script> <body> <form name="myform" id="myform"> <dl id="q1"> <dt>第一题</dt> <dd> <ul> <li><input name="item1" type="checkbox" value="1" />1_1</li> <li><input name="item1" type="checkbox" value="2" />1_2</li> <li><input name="item1" type="checkbox" value="3" />1_3</li> <li><input name="item1" type="checkbox" value="4" />1_4</li> <li><input name="item1" type="checkbox" value="5" />1_5</li> <li><input name="item1" type="checkbox" value="6" />1_6</li> </ul> </dd> </dl> <dl id="q2"> <dt>第二题</dt> <dd> <ul> <li><input name="item1" type="checkbox" value="1" />2_1</li> <li><input name="item1" type="checkbox" value="2" />2_2</li> <li><input name="item1" type="checkbox" value="3" />2_3</li> <li><input name="item1" type="checkbox" value="4" />2_4</li> <li><input name="item1" type="checkbox" value="5" />2_5</li> <li><input name="item1" type="checkbox" value="6" />2_6</li> </ul> </dd> </dl> <dl id="q3"> <dt>第三题</dt> <dd> <ul> <li><input name="item1" type="checkbox" value="1" /> 3_1</li> <li><input name="item1" type="checkbox" value="2" /> 3_2</li> <li><input name="item1" type="checkbox" value="3" /> 3_3</li> <li><input name="item1" type="checkbox" value="4" /> 3_4</li> <li><input name="item1" type="checkbox" value="5" /> 3_5</li> <li><input name="item1" type="checkbox" value="6" /> 3_6</li> </ul> </dd> </dl> <dl id="q4"> <dt>第四题</dt> <dd> <ul> <li><input name="item1" type="checkbox" value="1" /> 4_1</li> <li><input name="item1" type="checkbox" value="2" /> 4_2</li> <li><input name="item1" type="checkbox" value="3" /> 4_3</li> <li><input name="item1" type="checkbox" value="4" /> 4_4</li> <li><input name="item1" type="checkbox" value="5" /> 4_5</li> <li><input name="item1" type="checkbox" value="6" /> 4_6</li> </ul> </dd> </dl> <dl id="q5"> <dt>第五题</dt> <dd> <ul> <li><input name="item1" type="checkbox" value="1" /> 5_1</li> <li><input name="item1" type="checkbox" value="2" /> 5_2</li> <li><input name="item1" type="checkbox" value="3" /> 5_3</li> <li><input name="item1" type="checkbox" value="4" /> 5_4</li> <li><input name="item1" type="checkbox" value="5" /> 5_5</li> <li><input name="item1" type="checkbox" value="6" /> 5_6</li> </ul> </dd> </dl> <dl id="q6"> <dt>第六题</dt> <dd> <ul> <li><input name="item1" type="checkbox" value="1" /> 6_1</li> <li><input name="item1" type="checkbox" value="2" /> 6_2</li> <li><input name="item1" type="checkbox" value="3" /> 6_3</li> <li><input name="item1" type="checkbox" value="4" /> 6_4</li> <li><input name="item1" type="checkbox" value="5" /> 6_5</li> <li><input name="item1" type="checkbox" value="6" /> 6_6</li> </ul> </dd> </dl> <dl id="q7"> <dt>第七题</dt> <dd> <ul> <li><input name="item1" type="checkbox" value="1" /> 7_1</li> <li><input name="item1" type="checkbox" value="2" /> 7_2</li> <li><input name="item1" type="checkbox" value="3" /> 7_3</li> <li><input name="item1" type="checkbox" value="4" /> 7_4</li> <li><input name="item1" type="checkbox" value="5" /> 7_5</li> <li><input name="item1" type="checkbox" value="6" /> 7_6</li> </ul> </dd> </dl> <dl id="q8"> <dt>第八题</dt> <dd> <ul> <li><input name="item1" type="checkbox" value="1" /> 8_1</li> <li><input name="item1" type="checkbox" value="2" /> 8_2</li> <li><input name="item1" type="checkbox" value="3" /> 8_3</li> <li><input name="item1" type="checkbox" value="4" /> 8_4</li> <li><input name="item1" type="checkbox" value="5" /> 8_5</li> <li><input name="item1" type="checkbox" value="6" /> 8_6</li> </ul> </dd> </dl> <dl id="q9"> <dt>第九题</dt> <dd> <ul> <li><input name="item1" type="checkbox" value="1" /> 9_1</li> <li><input name="item1" type="checkbox" value="2" /> 9_2</li> <li><input name="item1" type="checkbox" value="3" /> 9_3</li> <li><input name="item1" type="checkbox" value="4" /> 9_4</li> <li><input name="item1" type="checkbox" value="5" /> 9_5</li> <li><input name="item1" type="checkbox" value="6" /> 9_6</li> </ul> </dd> </dl> <dl id="q10"> <dt>第十题</dt> <dd> <ul> <li><input name="item1" type="checkbox" value="1" /> 10_1</li> <li><input name="item1" type="checkbox" value="2" /> 10_2</li> <li><input name="item1" type="checkbox" value="3" /> 10_3</li> <li><input name="item1" type="checkbox" value="4" /> 10_4</li> <li><input name="item1" type="checkbox" value="5" /> 10_5</li> <li><input name="item1" type="checkbox" value="6" /> 10_6</li> </ul> </dd> </dl> </form> </body> </html>
提示:您可以先修改部分代码再运行
我爱阿仙奴!
积分
883
阅读权限
50
性别
男
在线时间
329 小时
注册
2008-4-27
最后登录
2008-7-20
查看个人网站
查看详细资料
TOP
zidanezhicong
我爱阿仙奴
高级会员
帖子
441
体力
883
威望
0
当前
广东 深圳
发短消息
个人网站
专长
前端制作
7
#
大
中
小
发表于 2008-5-13 18:56
原来,我理解错题意了,白忙一趟!不过解题的构想没错,修改扩展一下应该可以达到目的!
[
本帖最后由 zidanezhicong 于 2008-5-13 19:41 编辑
]
我爱阿仙奴!
积分
883
阅读权限
50
性别
男
在线时间
329 小时
注册
2008-4-27
最后登录
2008-7-20
查看个人网站
查看详细资料
TOP
dashzhao
赵勇
银牌会员
帖子
1950
体力
1660
威望
2
当前
广东 深圳
离线
2 天
发短消息
打分 1
个人网站
专长
策划,网站运营
8
#
大
中
小
发表于 2008-5-13 19:08
回复 zidanezhicong 在 7# 的帖子
数组的字好大哦
这个杀手有点蠢...
积分
1662
阅读权限
70
性别
男
在线时间
628 小时
注册
2007-5-6
最后登录
2008-7-18
查看个人网站
查看详细资料
TOP
zidanezhicong
我爱阿仙奴
高级会员
帖子
441
体力
883
威望
0
当前
广东 深圳
发短消息
个人网站
专长
前端制作
9
#
大
中
小
发表于 2008-5-14 00:24
终于按照楼主做好了,累啊!
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>随机排序</title> </head> <script language="javascript"> window.onload=function(){ var question=document.getElementById("question"); sortElement(question,"dl",2); var answer=question.getElementsByTagName("ul"); for(var l=0;l<answer.length; l++){ sortElement(answer[l],"li",6); } } function sortElement(parentNode,childTag,showNum){ var arr=new Array(); var childNodes=parentNode.getElementsByTagName(childTag); for(i=0;i<childNodes.length;i++){ childNodes[i].id=parentNode.id+"elem"+i; arr[i]=i;//生成一个数组 arr.sort(mysort);//对数组arr进行随机排序 } function mysort(a,b){ var tmp=Math.round(Math.random()); //生成一个随机数并取整,tmp的值为等于0或1的随机数。 return tmp?a-b:b-a; //根据0或1进行升/降排序 } var oFrag=document.createDocumentFragment(); for(j=0;j<arr.length;j++){ var elems=document.getElementById(parentNode.id+"elem"+arr[j]); oFrag.appendChild(elems); } parentNode.appendChild(oFrag); for(k=showNum;k<childNodes.length;k++){ childNodes[k].style.display="none"; } } </script> <body> <div id="question"> <form name="myform" id="myform"> <dl> <dt>第一题</dt> <dd> <ul id="answer1"> <li> <input name="item1" type="checkbox" value="1" /> 1_1</li> <li> <input name="item1" type="checkbox" value="2" /> 1_2</li> <li> <input name="item1" type="checkbox" value="3" /> 1_3</li> <li> <input name="item1" type="checkbox" value="4" /> 1_4</li> <li> <input name="item1" type="checkbox" value="5" /> 1_5</li> <li> <input name="item1" type="checkbox" value="6" /> 1_6</li> </ul> </dd> </dl> <dl> <dt>第二题</dt> <dd> <ul id="answer2"> <li> <input name="item1" type="checkbox" value="1" /> 2_1</li> <li> <input name="item1" type="checkbox" value="2" /> 2_2</li> <li> <input name="item1" type="checkbox" value="3" /> 2_3</li> <li> <input name="item1" type="checkbox" value="4" /> 2_4</li> <li> <input name="item1" type="checkbox" value="5" /> 2_5</li> <li> <input name="item1" type="checkbox" value="6" /> 2_6</li> </ul> </dd> </dl> </form> </div> </body> </html>
提示:您可以先修改部分代码再运行
我爱阿仙奴!
积分
883
阅读权限
50
性别
男
在线时间
329 小时
注册
2008-4-27
最后登录
2008-7-20
查看个人网站
查看详细资料
TOP
‹‹ 上一主题
|
下一主题 ››
版块跳转 ...
> 前台制作与脚本专栏
> 后台数据库编程
> WEB标准化专栏
> WAP 技术专栏
> 艺术与设计论坛
> Adobe Photoshop 专栏
> Fireworks 专栏
> 矢量图形专栏
> 插画手绘交流
> 用户体验综合版
> UI图形设计
> Flash 8 及之前版本
> Flash CS3 及 AS3
> Silverlight 专版
> Director 专栏
> 计算机技术
> 英语学习和技术翻译
> 摄影欣赏与技术交流
> 无线通讯与数码设备
> 企业招聘
> 体育运动、线下活动与游戏
> 创业版
做西部数码代理.Cn1元国际45元
【美橙超级G空间】688元绑定10个子目录
markmaoji练习本
Gerry练习本
小一练习本