一、教学目标：
1、学习面向对象的编程方法与书写结构，学习提炼对象的共同点与差异；
2、掌握创建html元素的方法createElement，并通过style对象配置大小、尺寸、位置等css样式；
3、掌握随机数的生成方法；
4、掌握定时器的使用setInterval及清除指定定时器；
5、学习键盘按下事件onkeydown；
二、知识点：
1、createElement(tagName)
该方法在文档对象document中创建一个有tagName字符串所指定的html元素。
使用方法示例：document.createElement("div");//创建一个元素
2、object.appendChild(elm)
将elm变量所指向的html元素加载到文档元素object中。
使用方法示例：document.body. object.appendChild(elm);//将元素elm加载到document.body中
3、Math.random()
方法可返回介于 0（包含） ~ 1（不包含）之间的一个随机数，当需要指定随机数范围时，可使用算法：begin+Math.random()*range;
4、setInterval(function(){},ms)
在浏览器中创建一个定时器，每隔ms毫秒执行一次function方法，并返回该定时器的编号。
5、clearInterval(id)
按照定时器编号清除指定的定时器。
6、onkeydown(e)
当键盘有按键按下时触发按键事件，并可以通过e.keyCode访问按键编号。
三、基本素材：
该图片资源已经放入e鸣集成开发环境的图片库的元素分类中，并通过lettera、letterb等方式有规则的命名，可通过url("Image/element/lettera.png")加载。
四、教学导入及探究
1、通过面向对象的方法创建随机字母，找到字母的共同点（大小、都要向下落、都要加载一个图片）、不同点（位置、图片）
2、都有几种情况发生时，当前字母需要被清除掉：1、掉到屏幕外、2按钮按到
3、一个打字练习都需要数据统计些什么关键数据？1总共字母数、2按中字母数、总按键数、掉到屏幕外的字母数
五、程序编写
1、创建字母对象Letter，介绍Letter开头字母大小是程序员的编码约定，当大家看到开头字母大写时，需要通过new 的方式来创建并使用它；
2、通过this指针配置字母的id、清除方法；
3、在定时器中每隔一段时间调整字母元素的top值，使它能够不断的从上到下移动起来。
4、在定时器中每隔一段时间通过new创建一个字母；
5、打字的数据统计
程序代码如下：
window.onload= function(){
var id = 0;
var chars = {};
var sum = 0;
var win = 0;
var lost = 0;
function Letter(speed){
speed = speed || 8;
var image =document.createElement("img");
image.style.position ="absolute";
image.style.left =Math.random()*(document.body.offsetWidth - 60) + "px";
this.key =parseInt(Math.random()*26)+65;
image.src ="Image/element/letter" + String.fromCharCode(this.key+32) +".png";
document.body.appendChild(image);
var y = 0;
var me = this;
var timer = setInterval(function(){
y += speed;
if (y > document.body.offsetHeight){
lost ++;
me.clear();
}
image.style.top = y +"px";
},80);
this.clear = function(){
clearInterval(timer);
document.body.removeChild(image);
delete chars[me.id];
}
id ++;
this.id = id;
chars[id] = this;
}
document.body.onkeydown = function(e){
for (var k in chars){
if (chars[k].key == e.keyCode){
win ++;
chars[k].clear();
break;
}
}
}
setInterval(function(){
sum ++;
new Letter(6);
var p =document.getElementById("p1");
p.innerText = "总数"+sum+" 正确"+win+" 丢失"+lost;
},500);
};
六、课堂活动及分享
1、通过调整创建字母定时器的执行时间，查看运行效果
2、通过打字练习看看谁的准确度更高
3、思考怎样可以使字母落下的速度随机不同
