J2EE之 javascript实例——打字游戏

一、搞两个button

1、<input id="startGame" type="button" value="开始游戏" οnclick="startGame(this)"/>

在js中定义一个function startGame(btn)

其中传入this可以得到这个button本身

2、js中定义一个window.onload = function(){....}按下开始按钮后，禁止该按钮，使其不能再次被执行

onload事件：window中的内容／或者图片下载完成／或者object标签指定的内容加载完成时触发；

关于window.onload的使用请看点击打开链接

二、js中定义一个getRandom产生随机字母

function getRandom(maxNumber){
return parseInt(Math.random()*maxNumber);
}

返回一个从maxNumber到0的随机整数。不包括maxNumber

三、控制层的移动，让一个Label从屏幕最上方移动到最下方,使用style的top属性进行控制;

使用实例：

html里面定义一个Label

<la <label id="testLabel" style="position: absolute;left: 10px;top: 22px;">
	A
</label>

js里面定义一个setInteval

	var label = document.getElementById("testLabel");
	var interVal_id = setInterval(function(){
		var oldTop = parseInt(label.style.top);
		var maxHeight = document.documentElement.clientHeight-20;
		if(oldTop>maxHeight){
			window.clearInterval(interVal_id);
			label.parentNode.removeChild(label);
		}
		label.style.top=oldTop+1+"px";
	},50);

setInteval第一个参数为执行的方法，top改变则label纵向移动，每次移动1px；第二个参数为调用方法的时间间隔为50毫秒。

maxHeight为浏览器窗体的最大高度，移动超过这个高度，则停止执行这个方法并删除label标签.

由 setInterval() 返回的 id值可用作 clearInterval() 方法的参数，clearInterval() 方法可取消由 setInterval() 设置的 timeout.

四、用css的类选择器创建label

html中定义：

<style type="text/css">
	.label{
		position: absolute;left: 10px;top: 22px;
	}	
</style>

其中类名就是label，{}中为预定义的label.style

js中定义:

function createLabel(code){
	var label = document.createElement("label");
	//label.style="position: absolute;left: 10px;top: 22px;";   另一种定义方式
	label.className = "label";
	label.innerHTML = code;
	return label;
}

className就对应css中的.label，传入的code由 getRandom产生：

var code = String.fromCharCode(65+getRandom(26));