`
yeluowuhen
  • 浏览: 158987 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

JS基础知识及一个小的Bingo卡片

阅读更多
一.事件处理程序(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">&nbsp;</th>
    <td id="square1">&nbsp;</td>
    <td id="square2">&nbsp;</td>
    <td id="square3">&nbsp;</td>
    <td id="square4">&nbsp;</td>
  </tr>
  <tr>
    <td scope="row" id="square5">&nbsp;</th>
    <td id="square6">&nbsp;</td>
    <td id="square7">Free</td>
    <td id="square8">&nbsp;</td>
    <td id="square9">&nbsp;</td>
  </tr>
  <tr>
    <td scope="row" id="square10">&nbsp;</th>
    <td id="square11">&nbsp;</td>
    <td id="square12">&nbsp;</td>
    <td id="square13">&nbsp;</td>
    <td id="square14">&nbsp;</td>
  </tr>
  <tr>
    <td scope="row" id="square15">&nbsp;</th>
    <td id="square16">&nbsp;</td>
    <td id="square17">&nbsp;</td>
    <td id="square18">&nbsp;</td>
    <td id="square19">&nbsp;</td>
  </tr>
  <tr>
    <td scope="row" id="square20">&nbsp;</th>
    <td id="square21">&nbsp;</td>
    <td id="square22">&nbsp;</td>
    <td id="square23">&nbsp;</td>
    <td id="square24">&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
<h2 align="center" id="redirect">
	
	
</h2>

</body>

</html>


0
0
分享到:
评论

相关推荐

    bingo游戏实现源码

    Bingo游戏通常涉及随机数字生成和匹配玩家卡片上的数字,这需要对数组操作、条件语句、事件处理等JavaScript基础知识有扎实的理解。通过这个项目,开发者可以学习如何在JavaScript中创建随机数,管理数据结构,以及...

    网络游戏-一种基于JavaScript语言的Bingo游戏实现方法.zip

    1. **游戏初始化**:游戏开始时,JavaScript需要创建一个Bingo卡片,这通常是一个二维数组,每个元素代表卡片上的一个数字。卡片可以预先填充,也可以在游戏开始时随机生成。同时,还需要一个数组来存储待抽取的数字...

    mn-statefair-bingo

    "mn-statefair-bingo"是一个基于JavaScript开发的宾果游戏项目。该项目可能是一个互动式的网页应用,让用户在类似于明尼苏达州州立博览会的环境中体验宾果游戏的乐趣。JavaScript作为客户端脚本语言,通常用于网页...

    Bingo!-开源

    为了进一步了解和参与"Mini Bingo",用户需要具备一定的编程知识,如HTML/CSS/JavaScript基础,以及理解服务器端语言如Python、Java或Node.js。此外,了解Git版本控制工具和GitHub的使用也是很有帮助的,因为大多数...

    宾果游戏:趣味宾果游戏

    1. **JavaScript基础**:包括变量、数据类型、控制流程、函数等基本概念。 2. **DOM操作**:如何使用JavaScript修改HTML元素,展示和更新游戏状态。 3. **事件监听与处理**:如何响应用户操作,如点击按钮、滚动等。...

Global site tag (gtag.js) - Google Analytics