在“ Eloquent Javascript”的第15章中,必须创建一个表情符号气球,用户可以通过按向上箭头将其扩展10%。另一方面,一旦用户按下箭头,它就会缩小10%。在某一点之后,气球爆炸(对我而言,一旦尺寸> 70,气球就会爆炸)。如果我想创建一个重置按钮,将气球爆炸后将其设置为其初始大小该怎么办。您将如何进行?这是我的尝试:
let p = document.querySelector("p");
let size;
function setSize(newSize) {
size = newSize;
p.style.fontSize = size + "px";
}
setSize(20);
function handleArrow(event) {
if (event.key == "ArrowUp") {
if (size > 70) {
p.textContent = "????";
document.body.removeEventListener("keydown", handleArrow);
} else {
setSize(size * 1.1);
event.preventDefault();
}
} else if (event.key == "ArrowDown") {
setSize(size * 0.9);
event.preventDefault();
}
}
function reset() {
document.getElementById("myBtn").style.fontSize = "20px";
let p = document.querySelector("myBtn");
}
document.body.addEventListener("keydown", handleArrow);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Balloon</title>
</head>
<body>
<p id="myBtn">????</p>
<button onclick="reset()">Reset</button>
</body>
<script src="balloon.js"></script>
</html>
此时,“ myBtn”仅重置气球,而不会将爆炸更改回气球表情符号。抱歉,很长的信息,谢谢您的关注。
好吧,reset()
将字体大小更改回20px,但除此之外,还必须再次做两件事:
#mybtn
回????因此,该reset()
方法将如下所示:
function reset() {
var btn = document.getElementById("myBtn");
btn.textContent = "????"
btn.style.fontSize = "20px";
document.body.addEventListener("keydown", handleArrow);
}