Bingo卡片案例筆記【一】、建立一個bingo卡片表格

阿新 • • 發佈：2019-01-17

一、【什麼是bingo卡片】

bingo卡片是一種上圖樣式的卡片，擁有5×5個空白的格子。格子中會填上一系列數字（當然會有一些限定）。

我們即將使用Html+javascript來建立一個網頁，隨機生成數字填入其中

例項要求如下：

1、可以填寫的數字從1-75

2、正中間為一個空白的格子，裡面填著Free

3、 B列中的數字要求是1～15之間的任一數字

I列中的數字要求是16～30之間的任一數字

N列中的數字要求是31～45之間的任一數字

G列中的數字要求是46～60之間的任一數字

O列中的數字要求是61～75之間的任一數字

二、【開始建立bingo卡片】

首先建立一個網頁，程式碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Bingo卡片</title>
<link rel="stylesheet" rev="stylesheet" href="bing.css"/>
<script type="text/javascript" src="bingo.js"></script>
</head>
<body>
<!--首先建立一個表格-->
<h1>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="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="1.html">點選此處</a>建立一個新的Bingo卡片</p>
</body>
</html>

效果如上圖，下一章我們將為這個頁面配置Css，給它新增邊框等屬性。

Bingo卡片案例筆記【一】、建立一個bingo卡片表格

一、【什麼是bingo卡片】 bingo卡片是一種上圖樣式的卡片，擁有5×5個空白的格子。格子中會填上一系列數字（當然會有一些限定）。我們即將使用Html+javascript來建立一個網頁，隨機生成數字填入其中例項要求如下： 1、可以填寫的數字從1-75 2、正中間

Bingo卡片案例筆記【三】、隨機生成數字並填寫到表格中去

在前面的步驟中，我們建立生成了html和css檔案。下面我們要通過javascript來隨機生成1～75中的數字並填寫到除“free”以外的所有表格中去。 window.onload=newCard; function newCard(){ //共有24個格子需要填

Bingo卡片案例筆記【四】、生成符合規範的數字

根據bingo卡片的要求可以知道，bingo卡片對生成的數字有著規定的要求，要求如下： B列中的數字要求是1～15之間的任一數字 I列中的數字要求是16～30之間的任一數字 N列中的數字要求是31～45之間的任一數字 G列中的數字要求是46～60之間的任一數字

蝸龍徒行-Spark學習筆記【一】初識Spark形成、演進、發展

【一】Hadoop版本演進過程由於Hadoop1.X 以前版本在 MapReduce 基本構架的設計上存在作業主控節點(JobTracker)單點瓶頸、作業執行延遲過長、程式設計框架不靈活等較多的缺陷和不足,2011 年 10 月,Hadoop 推出

CTF筆記【一】

提交一次指正 ctf 網線漏洞工具大小會有最近公司組織了一次為期兩個小時的CTF培訓，主要是講一些思路。雖然沒什麽幹貨，不過積累總是好的。 * 做題邏輯：根據分值來判斷題目難易程度，在有限時間裏可以舍棄認為有坑或者做不出的題目，如果隊伍中某個人有信心能夠做

文獻筆記【一】

一：基本資訊標題：基於UML的建模分析與應用時間：2016 出版源：大連大學檔案分類：文獻筆記二：研究背景問題定義：UML建模；分析建模；描述和構建難點：理解運用UML建模語言的靜態建模機制和動態建模機制及其使用方法相關工作： 1：描述系統的需求，以此確定系統的功能 2：依據系統

小程式筆記【一】

前段時間開始學習小程式，做了些零碎的筆記，時不時總結一下，這是第一篇。 1.{{...item}}將item資料平鋪展開 2.AnguralJS和小程式語言特點在資料繫結，比如：在js檔案中資料改變後，前端資料也跟著改變，不像Android等需要通過元件和節點去設定屬性，個人認為這是最

MySQL5.7參考手冊筆記【一】

官方手冊：https://dev.mysql.com/doc/refman/5.7/en/ MySQL安裝方式及注意事項 MySQL安裝程式 MySQLzip檔案注意事項：支援的系統平臺：https://www.mysql.com/support/suppor

spring boot 2.1學習筆記【一】新特性介紹

搭建springboot2.X工程本系列文章IDE都是用的是IntelliJ IDEA，springboot版本採用2.1.1 1.基於 Java 8，支援 Java 9，這意味著不可以使用JDK7 或更舊的版本執行SpringBoot2. 2.支援 Quar

【一】、封裝HttpClient和Json解析

封裝HttpClient和Json解析（這裡主要介紹封裝的思想，具體的程式碼實現我會在github中給出）在實際開發中，我們可能需要呼叫第三方伺服器的介面，這就要使用到HttpClient來發送請求，這裡就基於HttpClient封裝了比較方便的助手

在Turtlebot2機器人平臺進行SLAM演算法實驗的技術筆記【一】

一、關於演算法移植方面a.因實際專案需求，我需要把在turtlebot2實驗平臺上面的建圖、定位、路徑規劃、自主導航演算法移植到對應專案的另一個移動底座上，並且上位機也需要更換成另一臺筆記本或者工控機b.首先，我們需要把我們原先筆記本上的整個工作區拷貝到新的上位機上面，由於我

Workerman之WEB訊息推送框架使用筆記【一】

伺服器使用的時候需要注意雲盾和360埠攔截下載解壓到任意目錄 cd到目錄下執行 start.php linux ：php start.php start -d win：直接執行start_

筆記【7】Linux建立新使用者、建立軟連結等基本操作

一直在用管理員賬號，小心翼翼，擔心一不小心sudo rm -rf / 可能我的學生生涯就要中斷了。因此給自己建了個使用者，做好了資料資料夾連結。以下是筆記： 1.新建使用者 adduser orange 2.更改擁有者 chown or

cocos2d-x學習筆記【一】建立自己的場景類

本帖首發於自己新建的論壇網站：計算機專業學習網，www.hua2buxie.cn。有很多不懂，寫的也不好，望大家見諒！歡迎大家去我的網站發帖留言或者發教程。背景：前段時間才開始學習cocos2d-x

【轉】Centos 建立一個新使用者詳細講解

轉自：http://www.centoscn.com/CentOS/help/2013/0725/597.html 建立一個新使用者　　修改使用者的個人設定檔案目錄的許可權設定兩個重要檔案：passwd與group建立一個新使用者建立一個新的使用者包括兩個步驟，第一步是使

【讀書筆記】設計心理學2-如何管理復雜【一】

然而困難虛擬前行方式間接行為這就是找到最近在看一些書籍，感覺不寫一些筆記，效果不是特別明顯。出於這個目的，於是有了下面的讀書筆記文章。從《設計心理學2-如何管理復雜》開始寫吧。在看這本書之前，其實自己覺得各種事情只要肯學習，其實都是挺簡單的。但看了本書

TDD學習筆記【六】一Unit Test - Stub, Mock, Fake 簡介

-i moc load customers eight foreach 存在執行 repo 這篇文章簡介一下，如何通過 mock framework，來輔助我們更便利地模擬目標對象的依賴對象，而不必手工敲堆只為了這次測試而存在的輔助類型。而模擬目標對象的部分，常見的有

007-elasticsearch【一】概述、Elasticsearch 訪問方式、Elasticsearch 面向文檔、常用概念

rep ati -- 結構化沒有 class 標識副本 concepts 一、概述　　Elasticsearch 是一個開源的搜索引擎，建立在一個全文搜索引擎庫 Apache Lucene™ 基礎之上。　　Elasticsearch 也是使用 Jav

Tomcat學習筆記【1】--- WEB服務器、JavaEE、Tomcat背景

javascrip http .cn 目的 java log 進行瀏覽器靜態資源本文主要講學習Tomcat需要知道的基礎知識。一 Web服務器 Web服務器可以解析HTTP協議。當Web服務器接收到一個HTTP請求,會返回一個HTTP響應,例如送回一個HTML頁面。

從零開始的unity2017筆記【2D】（【一】sprite精靈建立相關）

一、建立精靈 1、把程式設定成2d編輯模式【edit】-【project settings】-【editor】開啟編輯器，把【default behavior mode】設為【2d】為了能讓多個圖片能隨時打包，將【editor】編輯器的【sprite packer】一項設為【alwa

Bingo卡片案例筆記【一】、建立一個bingo卡片表格

相關推薦