`
yeluowuhen
  • 浏览: 155811 次
  • 性别: 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
踩
分享到：
| TOMCAT部署项目有3种方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics