学习笔记.JavaScript应用程序（三）

1.函数传值&探测对象

window.onload = initAll;
/*
function initAll(){
    for(i=0;i<24;i++){
        var newNum = Math.floor(Math.random()*75) + 1;
        document.getElementById("square" + i).innerHTML = newNum;
    }
}
*/
function initAll(){
    if(document.getElementById){     //通过此属性检测是否支持JavaScript
        for(i=0;i<24;i++){
            setSquare(i);
        }
    }
    else{
        alert("Sorry,your browser doesn‘t support this script.")
    }
}
function setSquare(thisSquare){
    var newNum = Math.floor(Math.random() * 75) +1;
    document.getElementById("square" + thisSquare).innerHTML = newNum;
}

2.处理数组

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);
function initAll(){
    if(document.getElementById){
        for(i=0;i<24;i++){
            setSquare(i);
        }
    }
    else{
        alert("Sorry,your browser doesn‘t support this scirpt.")
    }
}
function setSquare(thisSquare){
    var currSquare = "square" + thisSquare;
    var newNum = Math.floor(Math.random() * 15) + 1 + colPlace[thisSquare] * 15;
    document.getElementById(currSquare).innerHTML = newNum;
}

数组定义的位置要么是全局，要么在setSquare()函数内。

3.do/while循环

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 usedNums = new Array(76);
function initAll(){
    if(document.getElementById){
        for(i=0;i<24;i++){
            setSquare(i);
        }
    }
    else{
        alert("Sorry,your browser doesn‘t support this scirpt.")
    }
}
function setSquare(thisSquare){
    var currSquare = "square" + thisSquare;
    var newNum;
    do{
        newNum = Math.floor(Math.random() * 15) + 1 + colPlace[thisSquare] * 15;
    }while(usedNums[newNum]);
    usedNums[newNum] = true;
    document.getElementById(currSquare).innerHTML = newNum;
}

注意循环条件usedNums[newNum]为假时结束循环。

4.使用javascript动态调整css。

function setSquare(thisSquare){
    var currSquare = "square" + thisSquare;
    var newNum;
    do{
        newNum = Math.floor(Math.random() * 15) + 1 + colPlace[thisSquare] * 15;
    }while(usedNums[newNum]);
    usedNums[newNum] = true;
    document.getElementById(currSquare).innerHTML = newNum;
    document.getElementById(currSquare).className = "";
    document.getElementById(currSquare).onmousedown = toggleColor;
}
function anotherCard(){
    for(i=1;i<usedNums.length;i++){
        usedNums[i] = false;
    }
    newCard();
    return false;
}
function toggleColor(evt){
    if(evt){
        var thisSquare = evt.target;
        //alert(evt.target);   //返回object HTMLTableCellElement
        //alert(evt.type);     //返回mousedown
    }
    else{
        var thisSquare = window.event.srcElement;
    }
    if(thisSquare.className == ""){
        thisSquare.className = "pickedBG";
    }
    else{
        thisSquare.className = "";
    }
}

5.检查状态。

function checkWin(){
    var winners = new Array(31,992,15360,507904,541729,557328,1083458,2162820,4329736,8519745,8659472,16252928);
    var setSquares = 0;
    var winnerOption = -1;
    //alert(winners[-1]);
    for(i=0;i<24;i++){
        var currSquare = "square" + i;
        if(document.getElementById(currSquare).className != ""){
            document.getElementById(currSquare).className = "pickedBG";    //当闪烁的行被点击取消一格后，使得本行剩余的方格取消闪烁。
            setSquares = setSquares | Math.pow(2,i);        //通过或运算选中点击的方格，即24位二进制中把选中的位置置1。
            //alert(setSquares);
        }
    }
    for(i=0;i<winners.length;i++){
        if((setSquares & winners[i]) == winners[i]){        //通过与运算匹配取胜的结果。
            winnerOption = i;
            //alert(winnerOption);
        }
    }
    if(winnerOption>-1){
        for(i=0;i<24;i++){
            if(winners[winnerOption] & Math.pow(2,i)){        //通过与运算匹配选中的格子
                currSquare = "square" + i;
                document.getElementById(currSquare).className = "winningBG";
            }
        }
    }
}