打字游戏html代码,打字游戏.html · 卢玉良0819/PersonalHomepage - Gitee.com

html,body{

width: 100%;

height: 100%;

background: radial-gradient(circle, #888, #111,#000 );

}

body{

display: flex;

justify-content: center;

align-items: center;

overflow: hidden;

font-size: 40px;

text-align: center;

}

.time,.please{

color: #FFFFFF;

}

#zimu{

font-size: 140px;

color: green;

}

60

A

请在键盘上按下屏幕所显示的字母

var zimu=document.querySelector('#zimu');

var jieguo=document.querySelector('.please');

var random;

// a-z,65-90

function xianshi(){

random=Math.floor(Math.random()*26+65);

zimu.innerHTML=String.fromCharCode(random);

}

xianshi();

var numtrue=0;

var numfalse=0;

window.οnkeydοwn=function(ev){

var Kvalue=ev.keyCode; /* keyCode键盘按下字母对应的数值*/

if(Kvalue==random){

numtrue++;

xianshi();

zimu.className='animated rollIn';

}

else{

numfalse++;

zimu.className='animated swing';

zimu.style.color='orangered';

}

var numrh=numtrue/(numtrue+numfalse)*100;

jieguo.innerHTML='对了'+numtrue+'个,错了'+numfalse+'个,正确率为'+numrh.toFixed(2)+'%';

setTimeout(function(){

zimu.className='';

zimu.style.color='green';

},300);

// 监听动画结束事件

// zimu.addEventListener("animationend",function(){

// zimu.className='';

// });

}

// 时间

var time=document.querySelector('.time');

var num=60;

var timer=setInterval(function(){

num-=0.01;

time.innerHTML=num.toFixed(2);

if(num<0){

clearInterval(timer);

window.οnkeydοwn=null;

time.innerHTML='时间到，游戏结束';

}

},10);

一键复制

编辑

Web IDE

原始数据

按行查看

历史