javascript中处理数组来生成卡片

前面的html css代码类似，以下是修改js代码

脚本3-6   这个脚本限制了每一列中值的范围
window.onload = initAll;
function initAll() {
if (document.getElementById) {
for (var i=0; i<24; i++) {
setSquare(i);
}
}
else {
alert("Sorry, your browser doesn't support this script");
}
}
function setSquare(thisSquare) {
var currSquare = "square" + thisSquare;
var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
var colBasis = colPlace [thisSquare] * 15;
var newNum = colBasis + Math.floor (Math.random() * 15) + 1;
document.getElementById(currSquare) innerHTML = newNum;
} 

解  释

1. var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
我们希望限制哪些随机数可以放在哪一列中。最简单的方法是给每一列分配一个编号（B：0，I：
1，N：2，G：3，O：4），然后用以下表达式计算可以放进每一列中的数字：（列号×15）+（1～15
的随机数）。
要用colPlace数组记录每个格子所属的列。它包含0～4的数字并重复五次（要减去空的格子。
请注意，数字2仅用了4次）。
2. var colBasis = colPlace[thisSquare] * 15;
var newNum = colBasis + Math.floor(Math.random() * 15) + 1;
我们首先计算列号：存储在colPlace[thisSquare]中的数字乘以15。newNum变量仍然生成随机数，
但不是1～75的数字，而是计算一个1～15的随机数，然后加上列号。因此，如果随机数是7，那么
它在B列中是7，在I列中是22，在N列中是37，在G列中是52，在O列中是67。

效果图跟上篇文章一样，只是用到了数组

下面是使用do/while更新数组

脚本3-9   这个脚本防止给定的列中出现重复的数字
window.onload = initAll;
var usedNums = new Array(76);
function initAll() {
if (document.getElementById) {
for (var i=0; i<24; i++) {
setSquare(i);
}
}
else {
alert("Sorry, your browser doesn't support this script");
}
}
function setSquare(thisSquare) {
var currSquare = "square" + thisSquare;
var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
var colBasis = colPlace [thisSquare] * 15;
var newNum;
do {
newNum = colBasis + getNewNum() + 1;
}
while (usedNums[newNum]);
usedNums[newNum] = true;
document.getElementById(currSquare). innerHTML = newNum;
}
function getNewNum() {
return Math.floor(Math.random() * 15);
}

解释一下

1. var newNum;
在前面的示例中，我们在创建newNum变量时对它进行初始化。因为我们将多次设置它，所以在进
入循环之前创建它，这样只需创建一次。
2. do {
这一行开始do代码块。关于这种循环必须记住的一点是，do块中的代码至少会执行一次。
3. newNum = colBasis + getNewNum() + 1;
与前面的示例一样，循环中的这行代码将newNum变量设置为我们需要的数字。
4. }
右花括号标出do块的结尾。
5. while (usedNums[newNum]);
while检查会使do代码块反复执行，直到检查结果为false为止。在这个示例中，我们检查usedNums[]
数组中newNum位置上的值，从而检查newNum是否已经使用过了。如果这个数字已经用过了，控制就
被传递回do块的开头，整个过程再次重复。最终，我们会找到一个没有使用过的数字。在此之后，
就会离开循环，将usedNums设置为true，并将newNum写到卡片上。