<!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' contentl和dkghfd3s `='ie=edge'>
<title>Document</title>
<style>
body{
background: url(../image/2.jpg)
}
span {
width: 20px;
height: 20px;
background: red;
text-align: center;
line-height: 20px;
border-radius: 50%;
color: #ffffff;
font-weight: 700;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
</body>
<div>得分：
<b></b>
</div>
<!--<span></span> -->
</html>
<script>
var str = 'qwertyuiopasdfghjklzxcvbnm0123456789';
var s = [];
var timer;
var score = 0;
var span = document.createElement('span');
function createSpan() {
document.body.appendChild(span);
var index = Math.floor(Math.random() * str.length);
s = str[index];
span.innerText = s;
var x = Math.random() * (document.documentElement.clientWidth - span.offsetWidth);
span.style.left = x + 'px'
move()
}
createSpan();
function move() {
var num = 0;
timer = setInterval(function () {
num += 3
if (num >= document.documentElement.clientHeight - span.clientHeight - 10) {
document.body.removeChild(span);
clearInterval(timer);
createSpan()
}
span.style.top = num + 'px'
}, 10);
}
document.onkeypress = function (e) {
e = e || window.event;
if (e.keyCode == s.charCodeAt(0)) {
clearInterval(timer);
createSpan()
score++;
document.querySelector('b').innerText = score;
}
}
</script>
