These days, lots of people are looking for online spacebar counters. There are also several websites about this. But if you want to make your own spacebar counter website, you can use this script.
You get a lot of code, just showing how many times the spacebar has been pressed. But this script also has a timer option. Which will show how many times the user is hitting the spacebar at a given time.
What is spacebar counter?
Many of us may not know what a spacebar counter is. A spacebar counter is a script that counts how many times a user hits a spacebar at a given time.
Gamers can use this tool to increase their gaming skill. You can also make a game like a spacebar game with timer and share it with your friends.
So first, check the spacebar counter script. If you want to learn, I will describe each line later in this post. Otherwise, you can copy the script and use it on your own website.
<!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>Here I have made a simple structure using a flex layout. You can modify it whatever you want.
In my script, I have set different variables like below
let timer = 0;
let hits = 0;
let interval = null;
let started = false;
let completed = false;In body keyup event, I am checking if the user hit the spacebar i.e. event.keyCode === 32. Here 32 is the key code of the spacebar key.
The completed variable will check whether the given time is over or not. If yes, the counter will be stopped. If not, it will check the timer is running by timer > 0. If the user does not set a time and hits the spacebar, the hit variable will be incremented 1 time.
If the timer is running i.e. user has set some specific time for example 60 seconds, we will check if the started variable is true or false.
If false, make it true and set an interval of 1 second, which will decrease the timer value. Also, check if the timer value is 0, which means the task is completed and clear the existing interval.
A space bar counter is a tool that helps improve the speed of the spacebar button. You can visit the space bar counter tool and improve the speed of your space bar button.
just showing how many times the spacebar has been pressed. But this script also has a timer option. Which will show how many times the user is hitting the spacebar at a given time.
just showing how many times the spacebar has been pressed. But this script also has a timer option. Which will show how many times the user is hitting the spacebar at a given time.
https://www.clickercounter.org/spacebar-clicker