1.根据ASCII码值转化成对应的字母或字符:
char = String.fromCharCode(ASCword);
2.显示正确率:
防止出现无限小数,.toFixed(2)可以只保留两位小数
resultBox.innerHTML = "正确:"+correct +"个"+" 错误:"+
error+"个"+"正确率:"+percent.toFixed(2)+"%";
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;margin: 0;
}
body,html{
width: 100%;
height: 100%;
background-color: grey;
text-align: center;
}
.wrapper{
width: 100%;
height: 100%;
}
.char{
font-size: 400px;
color: lightgreen;
}
.result{
font-size: 20px;
color:black;
}
.error{
color: red !important;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="char">A</div>
<div class="result">请在按键上按下屏幕上显示的字母</div>
</div>
<script>
window.onload = function(){
var temp;
var char = 0,
correct = 0,
error = 0,
percent;
var charBox = document.getElementsByClassName('char')[0];
var resultBox = document.getElementsByClassName('result')[0];
// 1.初始界面:每次打开页面的都不一样,随机出现的
// 检测键盘按下事件:按下,获取按下的值。与屏幕中出现的值对比,改变底下result的内容。
showWord();
window.onkeydown = function (e){
var keyCode = e.keyCode;
if(keyCode == temp){
// 正确,页面刷新
charBox.className = "char";
showWord();
correct++;
percent = (correct/(correct+error))*100;
resultBox.innerHTML = "正确:"+correct +"个"+" 错误:"+error+"个"+"正确率:"+percent.toFixed(2)+"%";
}else{
// 错误,页面变红
error++;
charBox.className = "char error";
percent = (correct/(correct+error))*100;
resultBox.innerHTML = "正确:"+correct +"个"+" 错误:"+error+"个"+"正确率:"+percent.toFixed(2)+"%";
}
}
function showWord(){
// ABCDEFG HIJKLMN OPQIST UVWXYZ ZHANSHI 展示大写字母,其ASCII码值范围在65~90
temp = Math.floor(Math.random()*25+65);
char = String.fromCharCode(temp);
console.log(char);
charBox.innerHTML = char;
}
}
</script>
</body>
</html>