學習筆記.JavaScript應用程式（三）

標籤：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";            }        }    }}

本文出自 “技術無巔峰” 部落格，請務必保留此出處http://shelia.blog.51cto.com/2930476/1622364

學習筆記.JavaScript應用程式（三）