首先将要产生的按键存到数组当中，随机产生角标，获得按键，创建标签，添加到屏幕当中，然后获得按键事件，与每一个值进行比较，如果有一样的，则删除，如果没有，则随机添加几个字母，还有经过指定时间，添加合适数量的字母，直到全部删除完，结束。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打字游戏</title>
<style type="text/css">
#div1{
width:100%;
background:green;
}
#div1 h2{
float: left;m
color:red;
font-size: 50px;
margin-left:40px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById(‘div1‘);//获得div元素
var arr=[‘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 h2s=oDiv.getElementsByTagName(‘h2‘);//得到div中的h2标签
var timer;//定义定时器变量
function tianjia(){//添加元素的方法
if(h2s.length!=0){//如果存在h2标签，说明还没有打完，再添加
var suiji=Math.floor(Math.random()*26);//随机产生数组角标
var zimu=arr[suiji];//获得对应角标的字母
var h2=document.createElement(‘h2‘);//创建h2标签
h2.innerHTML=zimu;//将内容添加到h2标签中
oDiv.appendChild(h2);//将h2标签添加到div中
}else{
alert(‘你赢了‘);//如果没有h2标签了，弹出你赢了
}
}
for(var i=0;i<5;i++){//首先先添加5的元素，在div当中有一个h2标签，才能添加
tianjia();
}
var obtn1=document.getElementById(‘1‘);//得到1按钮
obtn1.onclick=function(){//当点击1按钮时
clearInterval(timer);//关闭所有其他定时器
timer=setInterval(tianjia,1000);//每秒执行一次添加函数
}
var obtn2=document.getElementById(‘2‘);//同理
obtn2.onclick=function(){
clearInterval(timer);
timer=setInterval(tianjia,500);
}
var obtn3=document.getElementById(‘3‘);
obtn3.onclick=function(){
clearInterval(timer);
timer=setInterval(tianjia,330);
}
window.onkeydown=function(e){//键盘按键事件
var result;//定义全局变量
var ev=e||window.event;//获得兼容性事件对象
var jian=String.fromCharCode(ev.keyCode);//将按键的Code值转化为准确按键
for(var j=0;j<h2s.length;j++){//如果有你按下的键，则删除
if(jian==h2s[j].innerHTML){
result=oDiv.removeChild(h2s[j]);
}
}
if(!result){//如果你按的没有这个元素，则添加3个字母
for(var n=0;n<3;n++){
tianjia();
}
}
}
}
</script>
</head>
<body>
每秒增加数量：<input id=‘1‘ type="button" value="1"/>
<input id="2" type="button" value="2"/>
<input id="3" type="button" value="3"/>
<div id="div1">
<h2 id="suiji">Q</h2>
</div>
</body>
</html>
时间： 2024-10-07 14:28:23