瀏覽器支持版本：IE9+ 火狐 谷歌等
上一次使用canvas製作，代碼有些亂，這一次使用原生javascript製作，原理就是div動態生成，定時器刷新，div刪除，div重新生成，字母消失特效
由於使用addEventListener添加事件，IE9以下不支持，支持另外一種事件機制，但原理不同，暫時不考慮，等研究jQuery源碼之後，再回來修改兼容。
定時器
//定時器
window.requestAnimFrame=(function(){
return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
return window.setTimeout(callback, 1000 / 60);
};
})();//自動執行函數字母對象
//字母對象
var letters={
x:0,
y:0,//字母座標
ax:0,
ay:0,//蘋果圖片座標
awidth:40,
aheight:40,//蘋果圖片寬高
islive:false,
key:null,
le:null,
aPic:null,//蘋果圖片
lColor:null,//字母顏色
leArr:[],//保存生成的字母
getLetter:function(){
key=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
this.le=key[Math.floor(Math.random()*51)];
this.leArr.push(this.le);
this.ax=Math.floor(Math.random()*400)+20;
this.x=this.ax;
this.y=this.ay;
},
init:function(){
//初始化
this.ay=0;
for(var i=0;i<10;i++){
this.getLetter();//10個字母
this.draw(i);
}
},
draw:function(i){
//畫圖
this.ay++;
var div=document.createElement('div');
div.style.width=this.awidth+'px';
div.style.height=this.aheight+'px';
div.style.position='absolute';
div.style.top='-50px';
div.style.left=this.ax+'px';
$('.left')[0].appendChild(div);
var adiv=document.createElement('img');
adiv.id='img'+i;
adiv.style.width=this.awidth+'px';
adiv.style.height=this.aheight+'px';
adiv.style.position='relative';
adiv.style.top=0;
adiv.style.left=0;
adiv.src='images/蘋果[圖形].png';
div.appendChild(adiv);
var odiv=document.createElement('div');
odiv.id=i;
odiv.style.width=this.awidth/2+'px';
odiv.style.height=this.aheight/2+'px';
odiv.style.fontSize='28px';
odiv.style.color=this.lColor;
odiv.style.position='absolute';
odiv.style.top=3+'px';
odiv.style.left=15+'px';
odiv.innerHTML =this.le;
div.appendChild(odiv);
},
remove:function(i){//刪除蘋果
if(!this.islive){
$('#img'+i).src='images/boom.gif';
$('#'+i).style.display='none';
setTimeout(function(){
$('.left')[0].removeChild($('#'+i).parentNode);//刪除div節點
this.islive=true;
},1000);
}
},
born:function(i){//重新生成蘋果
var se=this;
setTimeout(function(){
if(this.islive){
se.le=key[Math.floor(Math.random()*51)];
se.leArr.splice(i,1,se.le);//修改數組對應下標字母
se.ax=Math.floor(Math.random()*400)+20;
se.draw(i);
this.islive=false;
}
},1000);
},
moveDown:function(){//向下運動
for(var i in letters.leArr){
if(parseFloat($('#'+i).parentNode.style.top)>=472){
letters.remove(i);//刪除
letters.born(i);
}//重新生成
$('#'+i).parentNode.style.top=parseFloat($('#'+i).parentNode.style.top)+Math.random()+'px';
}
requestAnimFrame(letters.moveDown);
}
}鍵盤事件
//鍵盤事件封裝
var keyDown={};//按鍵對象
var capsLock=false;//大寫按鍵判斷
window.addEventListener('keydown',function(e){
e=event||window.event;
//shift組合大寫按鍵
var capsLockKey = e.keyCode ? e.keyCode : e.which;
var shifKey = e.shiftKey ? e.shiftKey:((capsLockKey == 16) ? true : false);
if(((capsLockKey >= 65 && capsLockKey <= 90) && !shifKey)||((capsLockKey >= 97 && capsLockKey <= 122) && shifKey)){
var zh=true;
}else{
zh=false;
}
keyDown[e.keyCode]=true;
for(var i=0;i<letters.leArr.length;i++){
if(capsLock==false&&zh==true){//大寫鎖未打開且沒有按下shift鍵(組合鍵)
if(String.fromCharCode(e.keyCode).toLocaleLowerCase()==letters.leArr[i]){//字母區分大小寫
letters.remove(i);//消除字母
letters.born(i);//重新生成
}
}
else{//按下shift鍵或者大寫鎖已經打開
if(String.fromCharCode(e.keyCode)==letters.leArr[i]){
letters.remove(i);//消除字母
letters.born(i);//重新生成
}
}
if(e.keyCode==20){//由於javascript是事件監聽，所以無法知道按下大寫鎖前鍵盤大寫鎖是否已經打開
//(當做未打開），搞着玩的,可以忽略。
if(capsLock==false){
//大寫鎖開啓
capsLock=true;
return;
}
else{
//大寫鎖關閉
capsLock=false;
return;
}
}
}
});
window.addEventListener('keyup',function(e){
delete keyDown[e.keyCode];//釋放按鍵對象
}); 代碼到此基本結束，生下來的就是頁面結構，css樣式，附上完整代碼
