代码：
<!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=utf-8" /> <!--<meta http-equiv="refresh" content="2" />--> <title>打字游戏</title> <style> html,body{ width:100%; height:100%; margin:0; padding:0;} #main{ width:100%; height:100%;} font{ position:absolute; font-family:"微软雅黑"; font-size:36px;} #f{ position:absolute; font-family:"微软雅黑"; font-size:36px;} </style> </head> <body> <div id="main"> </div> </body> <script> var words=['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']; var winWidth=window.innerWidth-47;//获取浏览器宽度 var winHeight=window.innerHeight-47;//获取浏览器高度(由于win10下面有任务栏遮挡浏览器所以-47) var i=1; var num=0; var flag=0; //生成随机字母 function create(){ var r=(Math.floor(Math.random()*26)); var word=document.createElement('font'); word.innerHTML=words[r]; word.id=i; document.getElementById('main').appendChild(word);//appendChild() 方法向父节点main添加一个子节点到最后 //随机生成下落位置 var wr=(Math.floor(Math.random()*winWidth)); var f=document.getElementById(i); f.style.left=wr+"px"; i++; } //所有现存字母下掉 function drop(){ var x=document.getElementsByTagName('font'); for(var l=0;l<x.length;l++){ document.onkeydown=function(event){ var e = event || window.event; if(e && e.keyCode==x[0].innerHTML.charCodeAt()){ document.getElementById('main').removeChild(x[0]); } }; //判断是否到达底部，到底部删除当前子节点 if(x[l].style.top==winHeight+"px"){ document.getElementById('main').removeChild(x[l]); flag++; //超过10个没有打中游戏结束 if(flag>=10){ clearInterval(c); clearInterval(d); alert("game over"); break; } }else{ x[l].style.top=x[l].offsetTop+1+"px"; } } } var c=setInterval(create,1000);//生成速度 var d=setInterval(drop,10);//下掉速度 </script> </html>
以上代码为js简单打字小游戏demo，原文：https://www.cnblogs.com/mc-web/p/14221035.html