【HTML】极速计算！

ckblt · 发表于 2022-1-27 16:08:32

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

以前，我在学校看了《最强大脑》，里面的计算题让我吃惊！

现在，我正愁于没有灵感，突然，我想到了《最强大脑》……
就做了一个“大众版”《最强大脑》——《极速计算》！

规则：
电脑会出 5 道加减法题目，并要求玩家在 15 秒之内完成。

由于我懒得做美术，所以我懒得做美术。（？？？
由于网页比较丑，所以网页比较丑。（？？？？？

废话少说，上代码！

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body,
#game {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
body {
min-height: 100vh;
}
p {
margin-bottom: 1vh;
}
#game {
position: relative;
width: 75vw;
height: 75vh;
border: 1px solid #000;
}
#start,
#restart {
font-size: 1.2rem;
width: 100px;
height: 50px;
}
#restart {
display: none;
}
#count-down,
#ready {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
#count-down {
top: 30%;
}
.question,
.question-input {
font-size: 1.2rem;
}
.question-input {
width: 10vw;
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<h1>极速计算!</h1>
<p>By Ckblt</p>
<div id="game">
<button id="start">开始!</button>
<h1 id="ready"></h1>
<h1 id="count-down"></h1>
<ol id="questions"></ol>
<button id="restart">再来</button>
</div>
<script>
const sleep = (timeout) =>
new Promise((resolve) => setTimeout(resolve, timeout))
const random = (min, max) =>
Math.floor(Math.random() * (max - min + 1)) + min
const startButtonE = document.getElementById('start')
const restartButtonE = document.getElementById('restart')
const readyE = document.getElementById('ready')
const countDownE = document.getElementById('count-down')
const questionsE = document.getElementById('questions')
const click = () => {
startButtonE.style.display = 'none'
restartButtonE.style.display = 'none'
readyE.style = ''
countDownE.style = ''
questionsE.style = ''
questionsE.innerHTML = ''
// 开始倒计时
readyE.style.display = 'block'
readyE.innerHTML = '3'
const prom = sleep(1000)
const questions = []
// 出题
for (let i = 0; i < 5; i++) {
const question = [
random(0, 1) ? 'plus' : 'minus',
random(5, 30),
random(5, 30)
]
if (question[0] === 'minus') {
question[2] = random(1, question[1])
}
question.push(
question[0] === 'plus'
? question[1] + question[2]
: question[1] - question[2]
)
questions.push(question)
}
prom
.then(() => {
readyE.innerHTML = '2'
return sleep(1000)
})
.then(() => {
readyE.innerHTML = '1'
return sleep(1000)
})
.then(() => {
readyE.innerHTML = 'GO!'
readyE.style.animation = 'fade-out 1s forwards'
setTimeout(() => {
readyE.style.display = 'none'
}, 1000)
countDownE.innerHTML = '15'
countDownE.style.display = 'block'
// 显示题目
questions.forEach((question) => {
const questionE = document.createElement('li')
questionE.classList.add('question')
questionE.innerHTML =
question[1].toString() +
(question[0] === 'plus' ? '+' : '-') +
question[2].toString() +
'=<input type="input" class="question-input" /><span class="question-span"></span>'
questionsE.appendChild(questionE)
})
}) // 倒计时
.then(() => {
countDownE.innerHTML = '14'
return sleep(1000)
})
.then(() => {
countDownE.innerHTML = '13'
return sleep(1000)
})
.then(() => {
countDownE.innerHTML = '12'
return sleep(1000)
})
.then(() => {
countDownE.innerHTML = '11'
return sleep(1000)
})
.then(() => {
countDownE.innerHTML = '10'
return sleep(1000)
})
.then(() => {
countDownE.innerHTML = '9'
return sleep(1000)
})
.then(() => {
countDownE.innerHTML = '8'
return sleep(1000)
})
.then(() => {
countDownE.innerHTML = '7'
return sleep(1000)
})
.then(() => {
countDownE.innerHTML = '6'
return sleep(1000)
})
.then(() => {
countDownE.innerHTML = '5'
return sleep(1000)
})
.then(() => {
countDownE.innerHTML = '4'
return sleep(1000)
})
.then(() => {
countDownE.innerHTML = '3'
return sleep(1000)
})
.then(() => {
countDownE.innerHTML = '2'
return sleep(1000)
})
.then(() => {
countDownE.innerHTML = '1'
return sleep(1000)
})
.then(() => {
countDownE.innerHTML = '时间到!'
Array.from(
document.getElementsByClassName('question-input')
).forEach((e) => {
e.disabled = true
})
return sleep(2000)
})
.then(() => {
restartButtonE.style.display = 'block'
for (let i = 0; i < questions.length; i++) {
const question = questions[i]
const questionE = document.getElementsByClassName('question')[i]
const questionInputE =
document.getElementsByClassName('question-input')[i]
const questionSpanE =
document.getElementsByClassName('question-span')[i]
// 检查题目是否做错
if (questionInputE.value !== question[3].toString()) {
questionE.style.color = '#d22'
questionInputE.style.color = '#d22'
questionSpanE.style.color = '#2d2'
questionSpanE.innerHTML = question[3]
} else {
questionInputE.style.color = '#2d2'
}
}
})
}
// 当开始按钮被点击时，开始游戏
startButtonE.addEventListener('click', click)
restartButtonE.addEventListener('click', click)
</script>
</body>
</html>

复制代码

如果有问题，请回复我哦~

账号		自动登录	找回密码
密码			立即注册

[作品展示] 【HTML】极速计算！

马上注册，结交更多好友，享用更多功能^_^

浏览过的版块