js学习笔记（一）实现Bingo卡片

来源：互联网发布：java 在线视频技术编辑：程序博客网时间：2024/05/21 11:12

start04.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><link rel="stylesheet" href="script01.css"><script src="script11.js"></script></HEAD><BODY><h1>Create A Bingo Card</h1><table><tr><th>B</th><th>I</th><th>N</th><th>G</th><th>O</th></tr><tr><td id="square0"> </td><td id="square5"> </td><td id="square10"> </td><td id="square14"> </td><td id="square19"> </td></tr><tr><td id="square1"> </td><td id="square6"> </td><td id="square11"> </td><td id="square15"> </td><td id="square20"> </td></tr><tr><td id="square2"> </td><td id="square7"> </td><td id="free">Free</td><td id="square16"> </td><td id="square21"> </td></tr><tr><td id="square3"> </td><td id="square8"> </td><td id="square12"> </td><td id="square17"> </td><td id="square22"> </td></tr><tr><td id="square4"> </td><td id="square9"> </td><td id="square13"> </td><td id="square18"> </td><td id="square23"> </td></tr></table><p><a href="start04.html" id="reload">Click here</a> to create a new card</p></BODY></HTML>

引用的js

script11.js

window.onload = initAll;function initAll() {    if (document.getElementById) {        var list = new Array(76);        for (var i = 0; i < 24; i++) {            var newNum = null;            do {                newNum = getNum(i);            } while ( list [ newNum ]); //如果存在，则循环下去            list[newNum] = true; //不存在，则设置为true            document.getElementById("square" + i).innerHTML = newNum;        }    } else {        alert("不支持javascript")    }}//传参函数，参数为index，需要有返回值function getNum(index) {    var mod = Math.floor(index / 5);    //alert("mod="+mod);    var newNum = 15 * mod + Math.floor(Math.random() * 15) + 1; //    if (! (newNum >= 15 * mod + 1 && newNum <= 15 * mod + 1 + 14)) {        alert("不符合要求" + newNum + "--" + i);    }    return newNum;}

上面的js产生的效果是每次点击之后请求整个页面，有个跳转的过程，下面改进的js是只是点击之后，卡片变化，不再请求整个页面

添加CSS效果，鼠标在卡片方格按下去，就会显示红色

script11.js

window.onload = initAll;var userNums = new Array(76);function initAll() {    if (document.getElementById) {document.getElementById("reload").onclick=anothod;//不点击不执行        newCard();    } else {        alert("不支持javascript")    }}function newCard(){        for (var i = 0; i < 24; i++) {            var newNum = null;            do {                newNum = getNum(i);            } while (userNums[newNum]); //如果存在，则循环下去            userNums[newNum] = true; //不存在，则设置为true            document.getElementById("square" + i).innerHTML = newNum;//添加CSSdocument.getElementById("square"+i).className="";document.getElementById("square"+i).onmousedown = toggleColor;        }//for}//鼠标按下去事件function toggleColor(evt){if(evt){var thisSquare=evt.target;}else {var thisSquare=window.event.srcElement;}if(thisSquare.className==""){thisSquare.className="pickedBG";}else{thisSquare.className=""}}function anothod(){for(var i=1;i<userNums.length;i++){userNums[i] = false;}newCard();return false;}//传参函数，参数为index，需要有返回值function getNum(index) {    var mod = Math.floor(index / 5);    //alert("mod="+mod);    var newNum = 15 * mod + Math.floor(Math.random() * 15) + 1; //    if (! (newNum >= 15 * mod + 1 && newNum <= 15 * mod + 1 + 14)) {        alert("不符合要求" + newNum + "--" + i);    }    return newNum;}

//引用的css

body{background-color:white;color:black;font-size:20px;font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;}h1,th{font-family:Georgia,"Times New Roman",Times,serif;}h1{font-size:28px;}table{border-collapse:collapse;}th,td{padding:10px;border:2px #666 solid;text-align:center;width:20%;}#free,.pickedBG{background-color:#f66;}

0 0