一、搞两个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));