日期:2014-05-16 浏览次数:20454 次
?BINGO游戏中5*5的卡片上数字是这样的:第一行5个格分别为B、I、N、G、O五个字母,下面是5行5列,通常在1-15中选择B对应的数字,16-30中选择I对应的数字,31-45中选择N对应的数字,46-60中选择G对应的数字,61-75中选择O对应的数字,而且每一类是不能重复的。
下面用js实现的该卡片上数字随机生成的过程:
一个jsp页面,用来显示卡片,代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <link rel="stylesheet" rev="stylesheet" href="<%=request.getContextPath() %>/css/bingo.css" > <script type="text/javascript" src="<%=request.getContextPath() %>/js/bingo.js" charset="GBK"></script> </head> <body> <h1>Create A Bingo Card</h1> <br> <table border="1"> <tr> <td width="20%">B</td> <td width="20%">I</td> <td width="20%">N</td> <td width="20%">G</td> <td width="20%">O</td> </tr> <tr> <td id="square0"> </td> <td id="square1"> </td> <td id="square2"> </td> <td id="square3"> </td> <td id="square4"> </td> </tr> <tr> <td id="square5"> </td> <td id="square6"> </td> <td id="square7"> </td> <td id="square8"> </td> <td id="square9"> </td> </tr> <tr> <td id="square10"> </td> <td id="square11"> </td> <td id="free">Free</td> <td id="square12"> </td> <td id="square13"> </td> </tr> <tr> <td id="square14"> </td> <td id="square15"> </td> <td id="square16"> </td> <td id="square17"> </td> <td id="square18"> </td> </tr> <tr> <td id="square19"> </td> <td id="square20"> </td> <td id="square21"> </td> <td id="square22"> </td> <td id="square23"> </td> </tr> </table> <p> <a href="bingo.jsp" id="reload">Click here</a> to create a new card</p> </body> </html>?
bingo.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; font-size:24px; } #free{ background-color:#F66; }
bigno. js代码如下:
window.onload = initAll; var usednums=new Array(76); function initAll(){ if(document.getElementById){ document.getElementById("reload").onclick=anothercard;//点击链接时,执行anothercard这段js代码,不去从服务器重新加载页面 newcard(); }else{ alert("Sorry,you browser doesn't support this script!"); } } function newcard(){ for(var i=0;i<24;i++){ setSquare(i); } } function setSquare(thissquare){ var currentsquare="square"+thissquare; var colplace=new Array(0,1,2,3,4,0,1,2,3,4,0,1,3,4,0,1,2,3,4,0,1,2,3,4); var colbasis = colplace[thissquare]*15; do{ var newnum=colbasis + getnewnum() +1; //确保B列为1-15 I列是16-30 N列为31-45 G列为46-60 O列为61-75,且不重复 }while(usednums[newnum]) usednums[newnum] = true; document.getElementById(currentsquare).innerHT