第一个web应用程序

Bingo卡片游戏：

1.html代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Bingo card</title>
  <link rel="stylesheet" type="text/css"  href="script01.css">
  <script type="text/javascript" src="script01.js"></script>
</head>
<body>
  <h1>Creat A Bingo Card</h1>
  <table>
    <tr>
      <th>B</th>
      <th>I</th>
      <th>N</th>
      <th>G</th>
      <th>O</th>
    </tr>
    <tr>
      <th id="square0"> </th>
      <th id="square5"> </th>
      <th id="square10"> </th>
      <th id="square14"> </th>
      <th id="square19"> </th>
    </tr>
    <tr>
      <th id="square1"> </th>
      <th id="square6"> </th>
      <th id="square11"> </th>
      <th id="square15"> </th>
      <th id="square20"> </th>
    </tr>
    <tr>
      <th id="square2"> </th>
      <th id="square7"> </th>
      <th id="free">Free</th>
      <th id="square16"> </th>
      <th id="square21"> </th>
    </tr>
    <tr>
      <th id="square3"> </th>
      <th id="square8"> </th>
      <th id="square12"> </th>
      <th id="square17"> </th>
<th id="square22"> </th>
    </tr>
    <tr>
      <th id="square4"> </th>
      <th id="square9"> </th>
      <th id="square13"> </th>
      <th id="square18"> </th>
      <th id="square23"> </th>
    </tr>
  </table>
  <p><button id="reload">Click hhere</button>
    to create a new card</p> 
</body>
</html>

output：

bingo01

2.script01.css代码如下：

th {
  width:20%;
}

body {
  backrround-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 black solid;
  text-align:center;
}

#free {
  background-color:red;
}

output:

bingo02

3.script01.js代码如下：

 window.onload=initAll;
//当窗口完成加载时，调用initAll()函数
function initAll(){
  for(var i=0;i<24;i++){
    //开始循环，i＝0，递增到23，也就是总共迭代24次
    var newNum=Math.floor(Math.random()*75)+1;
    /*floor()代表返回最接近的整数，且是向下取整
     newNum为循环内部的新变量，并将其赋值为等号右边计算的结果
    Math.random()为0～1之间的随机数*/
    document.getElementById("square"+i).innerHtml=newNum;
    /*例如：第一次迭代时i＝0，id为square0的将获得一个newNum的
    随机数.将一直循环到表格填满*/
  }
}

因为需要将值传递给函数，我们对以上代码做以下变化：

 window.onload=initAll;
function initAll(){
  for(var i=0;i<24;i++){
    setSquare(i);//将i值传递给setSquare()函数
  }
}

function setSquare(thisSquare){
  //thisSquare代表更新的当前格子的编号，与每次迭代的i相对应
  var newNum=Math.floor(Math.random()*75)+1;
  document.getElementById("square"+thisSquare).innerHTML=newNum;
}

output：

bingo03

4.探测对象（检查浏览器是否有能力理解你要实用的对象的方法）

方法是对要寻找的对象进行条件测试。
代码如下：

window.onload=initAll;
function initAll(){
  if(document.getElementById){//if条件测试
    for(var i=0;i<24;i++){//then 为真时
      setSquare(i);
  }
}
  else { //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;
}

5. 处理数组

我们需要确保Bingo卡片的有效性，需要满足以下几点：
1.每一列具有不同的数字范围。B列是1～15，I列是16～30，N列是31～45，G列是46～60，O列是61～75；
2.不能有重复值；
先解决第一点，方法如下：

window.onload=initAll;
function initAll(){
  if(document.getElementById){
    for(var i=0;i<24;i++){
      setSquare(i);
  }
}
  else {
    alert("sorry,your browser doesn't support this script");
  }
}

function setSquare(thisSquare){
  var colPlace=new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,2,
                        3,3,3,3,3,4,4,4,4,4);
  //与前面id值相对应
  var colBasis=colPlace[thisSquare]*15;
  var newNum=colBasis+Math.floor(Math.random()*15)+1;
  document.getElementById("square"+thisSquare).innerHTML=newNum;
}

output:

bingo04

6.更新数组

再来解决第二个问题：

window.onload=initAll;
var usedNums=new Array(76);//建立一个包含76个对象的新数组
function initAll(){
  if(document.getElementById){
    for(var i=0;i<24;i++){
      setSquare(i);
  }
}
  else {
    alert("sorry,your browser doesn't support this script");
  }
}

function setSquare(thisSquare){
  var colPlace=new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,2,
                        3,3,3,3,3,4,4,4,4,4);
  //与前面id值相对应
  var colBasis=colPlace[thisSquare]*15;
  var newNum=colBasis+Math.floor(Math.random()*15)+1;
  if (!usedNums[newNum]){//如果newNum位置上是false，
    usedNums[newNum]=true;//则将其设置为“true”,并将newNum写到卡片上
  }
  document.getElementById("square"+thisSquare).innerHTML=newNum;
}

output:

bingo05

7.使用do／while循环

此时发现卡片上已经没有重复的数字了，但是会出现空的格子，以下我们将讨论如何解决。

window.onload=initAll;
var usedNums=new Array(76);
function initAll(){
  if(document.getElementById){
    for(var i=0;i<24;i++){
      setSquare(i);
  }
}
  else {
    alert("sorry,your browser doesn't support this script");
  }
}

function setSquare(thisSquare){
  var colPlace=new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,2,
                        3,3,3,3,3,4,4,4,4,4);
  var colBasis=colPlace[thisSquare]*15;
  var newNum;
  do{//do里面的代码至少执行一次
   newNum=colBasis+Math.floor(Math.random()*15)+1;}
  
 while (usedNums[newNum]){
    usedNums[newNum]=true;
  document.getElementById("square"+thisSquare).innerHTML=newNum;
  }
}

output

Paste_Image.png

8.以多种方式调用脚本

让用户自己有能力运行脚本

window.onload = initAll;

var usedNums=new Array(76);

function initAll() {
  if(document.getElementById){
    document.getElementById("reload").onclick = anotherCard;
    newCard(); 
  }else {
    alert("sorry,your browser doesn't support this script");
  }
}


function newCard(){
  for(var i=0;i<24;i++){
      setSquare(i);
  }
}

function setSquare(thisSquare){
  console.log('thisSquare:',thisSquare)
  var colPlace=new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,2,
                        3,3,3,3,3,4,4,4,4,4);
  var colBasis=colPlace[thisSquare]*15;
  var newNum;
  
  do{//do里面的代码至少执行一次
   newNum=colBasis+Math.floor(Math.random()*15)+1;
  }

 while (usedNums[newNum]);

  usedNums[newNum]=true;
  document.getElementById("square"+thisSquare).innerHTML=newNum;
  
}
  
function anotherCard(){
  for(var i=1;i<usedNums.length;i++){
    usedNums[i]=false;
  }
  newCard();
  //return false;
}

output:

bingo08
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,958评论 19赞 139
  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,403评论 25赞 708
  • Java初级面试题
    1. Java基础部分 基础部分的顺序：基本语法，类相关的语法，内部类的语法，继承相关的语法，异常的语法，线程的语...
    子非鱼_t_阅读 31,766评论 18赞 399
  • …
    想你时写的每一篇文章都是一封情书
    慕宁1999阅读 203评论 0赞 0
  • 开学第一天
    早早来到学校，想在门口迎接这群小鬼的到来，结果一到办公室就各种事情耽搁了，忙完手里的活感觉往教室跑，大老远就...
    皮_小皮阅读 270评论 0赞 4