Here is the full code of the Click per second test game you can follow this and make a good tool.
I create a
CPS test tool on this code you can use it.
Html
<div id="container">
<div id="zone"></div>
Clicks per second: <span id="counter">0</span>
</div>
CSS
body {
background: #aaa;
}
#container {
font: normal 26px sans-serif;
padding: 16px;
background: linear-gradient(#58c, #bcf);
box-shadow: 0 0 5px -1px, 0 0 5px #fff inset;
text-shadow: 0 0 5px #fff;
border-radius: 8px;
}
#zone {
height: 160px;
margin: 0 0 16px;
background: #fff;
box-shadow: 0 0 5px -1px inset, 0 0 5px #fff;
border-radius: 8px;
transition: box-shadow .5s;
}
#zone:hover {
box-shadow: 0 0 5px -1px inset, 0 0 5px #fff, 0 0 5px 1px #007 inset;
}
#counter {
font-weight: bold;
transition: opacity .5s;
}
#counter::before {
content: '';
font-weight: normal;
}
Js
var started, resetTimeoutHandle, resetTimeout = 1000,
container = document.getElementById('container'),
counter = document.getElementById('counter'),
zone = document.getElementById('zone'),
clicks = 0;
zone.onseclect = zone.onselectstart = function() {
return false;
};
function clicksPerSecond(started, clicks) {
return clicks / ((new Date()) - started) * 1000;
}
function count() {
clearTimeout(resetTimeoutHandle);
clicks++;
counter.innerText = clicksPerSecond(started, clicks);
resetTimeoutHandle = setTimeout(reset, resetTimeout);
return false;
}
function start() {
started = new Date();
clicks = 0;
counter.style.opacity = 1;
this.onmousedown = count;
this.onmousedown();
return false;
}
function reset() {
zone.onmousedown = start;
counter.style.opacity = 0.3;
}
reset();
Thank you in advance.