计算按键次数并以HTML形式显示

我做了一个简单的"太空棒模拟器"；使用HTML和JavaScript进行游戏。每当用户按下空格键时，一个图像就会被另一个图像替换，当松开键时，它会重置为原始图像。

我想在页面中添加一个计数器，用于统计用户按下空格键的次数。源代码如下：

var myRealUrl = "./assets/spacebar.png";
$("body").on("keydown", function (e) {
if(e.which == 32){   
$("#spacebar").attr("src", "./assets/spacebar_pressed.png")
}
});
$("body").keyup(function (e) {
$("#spacebar").attr("src", myRealUrl)
});
var button = document.getElementById('counter'),
count = 0;
button.onclick = function() {
count += 1;
button.innerHTML = "Click me: " + count;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
<link rel="stylesheet" href="css/stylesheet.css">
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="title">
<h1>Spacebar Simulator 2018</h1>
<span id="counter"><p></p></span>
</div>
<img src="assets/spacebar.png" id="spacebar">
<p>Pressed</p><p id="counter">0</p><p> times.</p>
<footer>
<p>&copy; 2018</p>
</footer>
</div>
<script src="js/spacebar.js"></script>
</body>
</html>

因此，设置一个页面级变量并在keydown事件处理程序中递增。

你尝试点击"按钮"的代码没有成功，因为需要点击的p元素里面没有内容，所以它没有呈现在屏幕上，因此没有什么可点击的。

此外，不能有多个元素具有相同的id，并且在span中放入p是无效的。

var counter = 0;  // Variable to hold the count
var myRealUrl = "./assets/spacebar.png";
var count = document.getElementById('counter');
$("body").on("keydown", function (e) {
if(e.which == 32){   
counter++; // Increment the counter
$("#spacebar").attr("src", "./assets/spacebar_pressed.png");
count.textContent = counter; // Log the count
}
});
$("body").keyup(function (e) {
$("#spacebar").attr("src", myRealUrl)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
<link rel="stylesheet" href="css/stylesheet.css">
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="title">
<h1>Spacebar Simulator 2018</h1>
</div>
<img src="assets/spacebar.png" id="spacebar">
		<p>Pressed <span id="counter">0</span> times.</p>
<footer>
<p>&copy; 2018</p>
</footer>
</div>
<script src="js/spacebar.js"></script>
</body>
</html>

相关内容

最新更新

热门标签：