功能介绍:
页面随机刷新一个字母,键盘按同一个字母,刷新下一个字母;如果按错,不刷新。
CSS页
<style>
div{
font-size: 200px;
font-weight: 600;
color: orangered;
text-align: center;
margin: 0 auto;
}
input{
display: block;
width: 200px;
height: 100px;
font-size:40px;
margin: 30px auto;
padding-left: 30px;
}
font{
display: block;
width: 200px;
font-size: 40px;
color: #000;
margin: 100px auto;
}
</style>
HTML页
<div>A</div>
<input type="text" placeholder="输入">
<font></font>
JavaScript页
<script>
var font = document.getElementsByTagName('font')[0];
var div = document.getElementsByTagName('div')[0];
var input = document.getElementsByTagName('input')[0];
var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var res = '';
var random = Math.floor(Math.random()*26);
console.log(random);
div.innerHTML = str[random];
console.log(str[random].charCodeAt());
var code = str[random].charCodeAt();
input.onkeyup = function(e)
{
if(e.keyCode == code)
{
var random = Math.floor(Math.random()*26);
font.innerHTML = '按对了';
div.innerHTML = str[random];
code = str[random].charCodeAt();
input.value = '';
}
else
{
font.innerHTML = '按错了';
input.value = '';
}
}
</script>
运行图: