Copier’sa sur code pen
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Testeur de CPS tactile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
background: #1e1e2f;
color: white;
text-align: center;
margin:0;
padding:50px;
}
button {
font-size: 36px;
padding: 40px 60px;
margin: 20px;
border-radius: 20px;
border: none;
cursor: pointer;
background: #3498db;
color: white;
touch-action: manipulation;
}
button:active {
background: #5dade2;
}
#stats {
font-size: 24px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>🖱 Testeur de CPS Tactile</h1>
<p>Clique autant que possible sur le bouton pendant le temps imparti !</p>
<button id="clickBtn">TAP !</button>
<p id="timer">Temps restant: 5s</p>
<div id="stats">
<p>Clics: <span id="clickCount">0</span></p>
<p>CPS: <span id="cps">0</span></p>
</div>
<button id="resetBtn">Réinitialiser</button>
<script>
let clickCount = 0;
let cps = 0;
let time = 5; // secondes
let interval = null;
let testRunning = false;
const clickBtn = document.getElementById('clickBtn');
const clickCountEl = document.getElementById('clickCount');
const cpsEl = document.getElementById('cps');
const timerEl = document.getElementById('timer');
const resetBtn = document.getElementById('resetBtn');
clickBtn.addEventListener('touchstart', () => {
if(!testRunning){
startTest();
}
clickCount++;
clickCountEl.innerText = clickCount;
});
// Commence le test
function startTest(){
testRunning = true;
interval = setInterval(() => {
time -= 0.1;
timerEl.innerText = 'Temps restant: '+time.toFixed(1)+'s';
if(time <= 0){
clearInterval(interval);
cps = clickCount / 5;
cpsEl.innerText = cps.toFixed(2);
timerEl.innerText = '⏱ Temps écoulé !';
testRunning = false;
}
},100);
}
// Réinitialisation
resetBtn.addEventListener('touchstart', () => {
clickCount = 0;
cps = 0;
time = 5;
testRunning = false;
clickCountEl.innerText = clickCount;
cpsEl.innerText = cps;
timerEl.innerText = 'Temps restant: 5s';
clearInterval(interval);
});
</script>
</body>
</html>
Réponses
Aucune réponse pour le moment.
Répondre au sujet
Pour répondre à un sujet ou à un commentaire, tu dois d’abord te connecter.
Connecte-toi à ton compte
