一.事件处理程序(event handler)
onabort 用户终止了页面的装载
onblur 用户离开了对象
onchange 用户修改了对象
onclick 用户点击了对象
onerror 脚本遇到一个错误
onfocus 用户激活了一个对象
onload 对象完成一个装载
onmouseover 鼠标指针移动到对象上
onmouseout 鼠标指针离开了对象
onselect 用户选择了对象的内容
onsubmit 用户提交了表单
onunload 用户离开了页面
二.几种常用语句:
1.confirm(),alert()及变量的比较(>,<,>=,<=);
2.window.location()指浏览器中显示的页面;window.load=function()指页面装载完成后触发function();document.getElementById("elementId").innerHTML="new content";
document.referrer指引用都页面;
3.document.getElementById().onclick=initAll;//注意无括号
function initAll(){};
4.两个概念:DOM脚本编程,无干扰脚本编程;
三. Bingo卡片的实现:
script07.js:注意每列约束条件是如何满足的,如B列数在1在15之间,I列在16到30之间,N列在31到45之间,G列在46-60之间,O列在61到75之间;
window.onload=initAll;
function initAll(){
var flag=new Array(76);
var newNum=new Array(0,1,2,3,4,0,1,2,3,4,0,1,2,3,4,0,1,2,3,4,0,1,2,3,4);
for(var i=0;i<76;i++){
flag[i]=false;
}
for(var i=0;i<24;i++){
if(document.getElementById){
var newNumber;
do{
newNumber=newNum[i]*15+Math.floor(Math.random()*15)+1;
flag[newNumber]=true;
document.getElementById("square"+i).innerHTML=newNumber;
}while(!flag[newNumber])
}
}
}
页面:
<!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" />
<link rel="stylesheet" rev="stylesheet" href="script01.css" />
<title>测试重定向</title>
</head>
<script src="script07.js" type="text/javascript" language="javascript">
</script>
<body bgcolor="#FFFFF">
<h1>Create A Bingo Card</h1>
<table width="200" border="1">
<tr>
<th scope="col" width="20%">B</th>
<th scope="col" width="20%">I</th>
<th scope="col" width="20%">N</th>
<th scope="col" width="20%">G</th>
<th scope="col" width="20%">O</th>
</tr>
<tr>
<td scope="row" id="square0"> </th>
<td id="square1"> </td>
<td id="square2"> </td>
<td id="square3"> </td>
<td id="square4"> </td>
</tr>
<tr>
<td scope="row" id="square5"> </th>
<td id="square6"> </td>
<td id="square7">Free</td>
<td id="square8"> </td>
<td id="square9"> </td>
</tr>
<tr>
<td scope="row" id="square10"> </th>
<td id="square11"> </td>
<td id="square12"> </td>
<td id="square13"> </td>
<td id="square14"> </td>
</tr>
<tr>
<td scope="row" id="square15"> </th>
<td id="square16"> </td>
<td id="square17"> </td>
<td id="square18"> </td>
<td id="square19"> </td>
</tr>
<tr>
<td scope="row" id="square20"> </th>
<td id="square21"> </td>
<td id="square22"> </td>
<td id="square23"> </td>
<td id="square24"> </td>
</tr>
</table>
<p> </p>
<h2 align="center" id="redirect">
</h2>
</body>
</html>
分享到:
相关推荐
Bingo游戏通常涉及随机数字生成和匹配玩家卡片上的数字,这需要对数组操作、条件语句、事件处理等JavaScript基础知识有扎实的理解。通过这个项目,开发者可以学习如何在JavaScript中创建随机数,管理数据结构,以及...
1. **游戏初始化**:游戏开始时,JavaScript需要创建一个Bingo卡片,这通常是一个二维数组,每个元素代表卡片上的一个数字。卡片可以预先填充,也可以在游戏开始时随机生成。同时,还需要一个数组来存储待抽取的数字...
"mn-statefair-bingo"是一个基于JavaScript开发的宾果游戏项目。该项目可能是一个互动式的网页应用,让用户在类似于明尼苏达州州立博览会的环境中体验宾果游戏的乐趣。JavaScript作为客户端脚本语言,通常用于网页...
为了进一步了解和参与"Mini Bingo",用户需要具备一定的编程知识,如HTML/CSS/JavaScript基础,以及理解服务器端语言如Python、Java或Node.js。此外,了解Git版本控制工具和GitHub的使用也是很有帮助的,因为大多数...
1. **JavaScript基础**:包括变量、数据类型、控制流程、函数等基本概念。 2. **DOM操作**:如何使用JavaScript修改HTML元素,展示和更新游戏状态。 3. **事件监听与处理**:如何响应用户操作,如点击按钮、滚动等。...