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写到卡片上。