直接上代码:
html部分:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" href="css_01.css"> <title>Make your own Bingo Card</title> </head> <body> <h1>create your own 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"> </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="Bingo.html" id="reload">Click here</a>to create a new card </p> </body> </html> <script src="js_01.js"></script>
css部分
body{
background: white;
color: black;
font-size: 20px;
font-family:verdana, helvetica, arial, sans-serif;
font-weight: 900;
}
h1,th{
font-family:verdana, helvetica, arial, sans-serif;
}
h1{
font-size: 28px;
}
table{
border-collapse: collapse;
}
th,td{
padding: 10px;
border: 2px #666 solid;
text-align: center;
width: 20px;
}
#free, .pickedBG{
background-color: #f66;
}
js部分:
/** * Created by rui on 2015/5/5. */ window.onload=initAll; var usedNums=new Array(76); function initAll(){ if(document.getElementById) { //重新加载这里有问题 document.getElementById("reload").onclick=anotherCard; newCard(); }else{ alert("sorry,浏览器不支持!") } } function newCard(){ for(var i=0;i<24;i++) { setSquare(i); } } function setSquare(thisSquare){ var currentSquare="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 colBasic=colPlace[thisSquare]*15; var newNum; do{ newNum=colBasic+getNum()+1; }while(usedNums[newNum]==false); //将数组的内容改为存储当前值 usedNums[newNum]=true; document.getElementById(currentSquare).innerHTML=newNum; } function getNum(){ return Math.floor(Math.random()*15); } function anotherCard(){ for(var i=1;i<usedNums.length;i++){ usedNums[i]=false; } newCard(); return false; }
本人刚开始学习javascript,这个是书上的学习项目,其他部分运行就是ok的,但是点击onload就是出现问题,我用google chrome浏览器当前页面鼠标指针会变成手掌然后就不能操作了,我想知道这是为什么?控制台也没有任何消息,个人猜测可能有浏览器的问题?我觉得代码问题不大啊。。
html 和css 部分打不开呢。。。。
不好意思,修改了,全部不折叠可能有点乱
@ruirui610: 用这个循环就死编译器。。。。
do{ newNum=colBasic+getNum()+1; }while(usedNums[newNum]==false);
你不需要首次调用anotherCard() 这个方法去把数组初始化为false吗?
不然数组的值都是undefined.
那么循环,不是死循环了吗?
while(usedNums[newNum]==false)
我觉得你这个循环是有问题的,麻烦你单独验证这个循环先
@chengdu.jack.li: 好吧,我弄错了,不好意思啊,应该是while(usedNums[newNum])这样的
@chengdu.jack.li: 并不需要初始化,默认就是false
好吧,那么我建议你还是看视频,然后开始看书,试过了,再去找根