1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>将数组随机打乱显示</title>
5 <meta name="generator" content="editplus" />
6 <meta name="author" content="Aken Li" />
7 <meta name="keywords" content="将数组随机打乱显示" />
8 <meta name="description" content="将数组随机打乱显示" />
9 <script type="text/javascript">
10 <!--
11 /*
12 目的：将数组随机打乱显示
13 基本思路：随机读取数组1中的一个数据，将其与数组2中的数据进行比较，如果存在，就另读取，直到读到新数据存到数组2中，当数组2的长度等于数组1的长度时，停止读取数据，输出数组2。
14 变化：因为数据有可能有重复，所以再使用一个数据来存储数组2中的数据序号，检验数据是否读取过时，改成比较数据序号。
15 */
16 var oArrays = ["1","2","3","4","5","6"];
17 //var oArrays = ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","61","62","63","64","65","66","67","68","69","70","71","72","73","74","75","76","77","78","79","80","81","82","83","84","85","86","87","88","89","90","91","92","93","94","95","96","97","98","99","100"];
18
19 function ranArr(oArr,id) //参数1为原始数组，参数2为输出的位置id
20 {
21 var tempArrays = [];//临时数组
22 var arrNum = [];//临时数组的数据序号
23 var engLength = oArr.length;
24 var tempLength = 0;
25 var tempNum;
26 var tempArray;
27 var isAppear;//设置一个指针变量记录新记取的数据是否存在
28 var oArris;
29 var ss;
30 while (tempLength < engLength)//当临时数组的长度小于原始数组的长度时循环
31 {
32 tempNum = Math.floor(Math.random()*engLength);//取得一个随机数
33 isAppear = false;
34 oArris = false;
35 if(tempNum==tempLength) isAppear = true;
36 for(var i=0;i<tempLength;i++)//循环读取临时数组的数据序号，当数据存在时，设置指针变量为真，并跳出循环
37 {
38 if (tempNum==arrNum[i] && isAppear == false)
39 {
40 isAppear = true;
41 break;
42 }
43
44 if(engLength-1==arrNum[i])
45 {
46 oArris=true;
47 }
48 }
49
50 if (tempLength+2==engLength && oArris==false)
51 {
52 tempNum=engLength-1;
53 }
54 if (!isAppear)//数据不存在，就存到临时数组中
55 {
56 tempArray = oArr[tempNum];//读取原始数组里的数据
57 tempArrays[tempLength]=tempArray;
58 arrNum[tempLength]=tempNum;
59 tempLength++;
60 }
61 }
62 for (var i=0;i<tempArrays.length;i++)
63 {
64 ii=i+1;
65 if (i==0)
66 {
67 ss = ii + " - " + tempArrays[i] + "<br/>";
68 }
69 else
70 {
71 ss=ss + ii + " - " + tempArrays[i] + "<br/>";
72 }
73 }
74 document.getElementById(id).innerHTML = ss;
75
76 }
77 window.onload = function() {
78 var d1s= (new Date()).getTime();
79 ranArr(oArrays, "showResult");
80 var d2s= (new Date()).getTime();
81 document.getElementById("showTime").innerHTML = d2s-d1s;
82 document.getElementById("showNew").onclick = function()
83 {
84 var d1s= (new Date()).getTime();
85 ranArr(oArrays, "showResult");
86 var d2s= (new Date()).getTime();
87 document.getElementById("showTime").innerHTML = d2s-d1s;
88 }
89 }
90 //-->
91 </script>
92 <style type="text/css">
93 <!--
94 body {margin:0; padding:0;}
95 p {text-align:center; background:#EEE; padding:20px 0; margin: 0;}
96 span {width: 780px; word-break:break-all}
97 input {width:100px; height:30px}
98 -->
99 </style>
100 </head>
101
102 <body>
103 <p>
104
105 <span id="showTime"> </span><br />
106 <input id="showNew" name="showNew" type="button" value="生成新顺序" />
107 <br /><br />
108 <span id="showResult"> </span>
109
110 </p>
111 </body>
112 </html>
113
