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>


你可能感兴趣的:(编程,浏览器,脚本)