一.js部分代碼
? ? 1.創(chuàng)建字母和下落字母的方法
? ? 2.產(chǎn)生隨機(jī)顏色的方法
3.設(shè)置開始和暫停
二.css部分代碼
三.運(yùn)行展示
四.完整代碼
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>打字游戲</title>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ? .content {
? ? ? ? ? ? width: 800px;
? ? ? ? ? ? height: 100vh;
? ? ? ? ? ? background-color: black;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? position: relative;
? ? ? ? }
? ? ? ? .content .zm {
? ? ? ? ? ? width: 30px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? background-color: lightcoral;
? ? ? ? ? ? color: white;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? line-height: 30px;
? ? ? ? ? ? position: absolute;
? ? ? ? }
? ? ? ? .msg {
? ? ? ? ? ? width: 400px;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? font-size: 40px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? line-height: 200px;
? ? ? ? ? ? top: 0;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? right: 0;
? ? ? ? ? ? bottom: 0;
? ? ? ? ? ? margin: auto;
? ? ? ? ? ? background-color: rgba(92, 182, 241, 0.486);
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="content">
? ? ? ? <div class="msg">
? ? ? ? ? ? 按回車鍵開始/暫停
? ? ? ? </div>
? ? </div>
? ? <script>
? ? ? ? let content = document.querySelector('.content')
? ? ? ? window.onkeyup = function (e) {
? ? ? ? ? ? let { key, keyCode } = e
? ? ? ? ? ? if (keyCode === 13) {
? ? ? ? ? ? ? ? if (!timer1 && !timer2) {
? ? ? ? ? ? ? ? ? ? createZm()
? ? ? ? ? ? ? ? ? ? downZm()
? ? ? ? ? ? ? ? ? ? document.querySelector('.msg').style.display = 'none'
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? clearInterval(timer1)
? ? ? ? ? ? ? ? ? ? clearInterval(timer2)
? ? ? ? ? ? ? ? ? ? timer1 = null
? ? ? ? ? ? ? ? ? ? timer2 = null
? ? ? ? ? ? ? ? ? ? document.querySelector('.msg').style.display = 'block'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? if (timer1 && timer2) {
? ? ? ? ? ? ? ? let zmList = document.querySelectorAll('.zm')
? ? ? ? ? ? ? ? zmList.forEach(r => {
? ? ? ? ? ? ? ? ? ? if (key.toUpperCase() == r.innerText) {
? ? ? ? ? ? ? ? ? ? ? ? r.remove()
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? let zmtxts = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
? ? ? ? let timer1 = null
? ? ? ? function createZm() {
? ? ? ? ? ? timer1 = setInterval(() => {
? ? ? ? ? ? ? ? let zm = document.createElement('div')
? ? ? ? ? ? ? ? zm.innerText = zmtxts[Math.floor(Math.random() * 26)]
? ? ? ? ? ? ? ? zm.className = 'zm'
? ? ? ? ? ? ? ? zm.style.backgroundColor = getColor()
? ? ? ? ? ? ? ? zm.style.top = '-30px'
? ? ? ? ? ? ? ? zm.style.left = Math.random() * 770 + 'px'
? ? ? ? ? ? ? ? content.appendChild(zm)
? ? ? ? ? ? }, 1000);
? ? ? ? }
? ? ? ? let timer2 = null
? ? ? ? function downZm() {
? ? ? ? ? ? timer2 = setInterval(() => {
? ? ? ? ? ? ? ? let zmList = document.querySelectorAll('.zm')
? ? ? ? ? ? ? ? zmList.forEach(r => {
? ? ? ? ? ? ? ? ? ? let top = r.offsetTop + 1
? ? ? ? ? ? ? ? ? ? r.style.top = top + 'px'
? ? ? ? ? ? ? ? ? ? if (r.offsetTop > content.offsetHeight - r.offsetHeight) {
? ? ? ? ? ? ? ? ? ? ? ? r.remove()
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }, 20)
? ? ? ? }
? ? ? ? function getColor() {
? ? ? ? ? ? let colortxts = '0123456789ABCDEF'
? ? ? ? ? ? let color = '#'
? ? ? ? ? ? for (let i = 0; i < 6; i++) {
? ? ? ? ? ? ? ? color += colortxts[Math.floor(Math.random() * 16)]
? ? ? ? ? ? }
? ? ? ? ? ? return color
? ? ? ? }
? ? </script>
</body>
</html>
