这些天来，很多人都在寻找在线空格键计数器。也有几个关于这个的网站。但如果你想做自己的空格键计数器网站，你可以使用这个脚本。
你会得到很多代码，只是显示空格键被按下了多少次。但这个脚本也有一个定时器选项。这将显示用户在特定时间内按下空格键的次数。
什么是空格键计数器？
我们中的许多人可能不知道什么是空格键计数器。空格键计数器是一个统计用户在特定时间内点击空格键次数的脚本。
游戏者可以使用这个工具来提高他们的游戏技能。你也可以制作一个类似于带计时器的空格键游戏，并与你的朋友分享它。
因此，首先要检查空格键计数器脚本。如果你想学习，我将在本帖后面描述每一行。否则，你可以复制该脚本并在你自己的网站上使用它。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spacebar Clicker demo - codehasbug.com</title>
<style>
html,body {
height: 100%;
}
.wrapper{
display: flex;
flex-wrap: wrap;
flex-flow: column;
justify-content: center;
text-align: center;
height: 100%;
}
.title{
font-size: 40px;
}
.counter-wrapper{
font-size: 2em;
font-weight: bold;
color: #000;
}
.counter{
font-size: 5em;
color: #e28d73;
text-shadow: rgb(0 0 0) 1px 0px 2px, rgb(0 0 0) 0px 2px 0px, rgb(0 0 0) 1px 0px 0px, rgb(0 0 0) 0px -1px 1px;
}
.timer{
font-size: 30px;
font-weight: bold;
color: #737373;
}
.reset{
margin: 20px 0;
}
.reset #restart{
width: 220px;
background-color: #07004c;
color: #fff;
padding: 8px 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<h1 class="title">Spacebar Clicker</h1>
<div class="counter-wrapper">You have hit spacebar <span class="counter">0</span> times.</div>
<div class="timer">Timer : <span id="count">0</span> sec</div>
<div class="option">
<input type="number" id="duration">
<button id="setTime">Set Timer</button>
</div>
<div class="reset">
<button id="restart">Reset</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
let timer = 0;
let hits = 0;
let interval = null;
let started = false;
let completed = false;
$('body').keyup(function(event){
if( event.keyCode === 32 ){
if(!completed){
if( timer > 0){
if( started === false ){
started = true;
interval = setInterval(function(){
timer--;
$("#count").text( timer);
if(timer === 0){
completed = true;
clearInterval(interval);
$("#duration").attr("disabled", false);
$("#setTime").attr("disabled", false);
}
}, 1000);
$("#duration").attr("disabled", true);
$("#setTime").attr("disabled", true);
}
hits++;
$(".counter").text(hits);
}else{
hits++;
$(".counter").text(hits);
}
}
}
});
$('#setTime').click(function(){
if( $("#duration").val() && $("#duration").val()>0 ){
completed = false;
started = false;
timer = $("#duration").val();
$("#count").text(timer);
hits = 0;
$(".counter").text(hits);
}else{
$("#duration").val("");
}
});
$('#restart').click(function(){
$(".counter").text("0");
$("#count").text("0");
$("#duration").attr("disabled", false);
$("#setTime").attr("disabled", false);
$("#duration").val("");
timer = 0;
hits = 0;
interval = null;
started = false;
completed = false;
});
});
</script>
</body>
</html>
在这里，我使用flex布局做了一个简单的结构。你可以随心所欲地修改它。
在我的脚本中，我设置了不同的变量，如下所示
let timer = 0;
let hits = 0;
let interval = null;
let started = false;
let completed = false;
在bodykeyup 事件中，我正在检查用户是否点击了空格键，即event.keyCode === 32 。这里的32是空格键的代码。
完成变量将检查给定的时间是否已经结束。如果是，计数器将被停止。如果不是，它将通过timer > 0 ，检查定时器是否在运行。如果用户没有设置时间并点击空格键，hit变量将被递增1次。
如果定时器正在运行，即用户已经设置了一些特定的时间，例如60秒，我们将检查started变量是 真还是假。
如果是假的，就把它变成真的，并设置一个1秒的间隔，这将减少定时器的值。同时，检查定时器的值是否为0，这意味着任务已经完成，并清除现有的时间间隔。
