javascript - 计算按键并在 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>© 2018</p>
</footer>
</div>
<script src="js/spacebar.js"></script>
</body>
</html>
解决方案
所以设置一个页面级变量并在keydown
事件处理程序中增加它。
您对“按钮”单击代码的尝试不起作用,因为p
需要单击的元素内部没有内容,因此它没有呈现在屏幕上,因此没有可单击的内容。
此外,您不能拥有多个相同的元素,id
并且在 a 中放置 a 是无效p
的span
。
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>© 2018</p>
</footer>
</div>
<script src="js/spacebar.js"></script>
</body>
</html>
推荐阅读
- python - 在python中打印字典值和键(索引)
- codeigniter-4 - 在 ci4 中删除 index.php 但没有任何反应
- php - PHP jQuery Tabledit 选择选项
- python - 刮问题。为什么没有数据被抓取?
- javascript - 为什么我的 SCSS 文件在导入后没有应用到我的 React 中?
- flutter - Flutter 和 Dart 扩展
- kotlin - 在 Kotlin 中正确使用 Number 类
- android - 我在E盘安装了flutter,但在C盘安装了android studio。它会起作用吗?
- javascript - Angular 指令如何工作?(ng*For) 为例
- javascript - 使用 react 获取 json api ( useeffect )