simulation done
This commit is contained in:
parent
0e7de0a5f3
commit
05bbcb244f
55 changed files with 4367 additions and 756 deletions
95
docs/test.html
Normal file
95
docs/test.html
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Hold Timer</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #111;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 24px;
|
||||
padding: 30px 60px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
#result {
|
||||
margin-top: 24px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
#live {
|
||||
margin-top: 12px;
|
||||
font-size: 20px;
|
||||
opacity: 0.85;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<button id="btn">PRESS AND HOLD</button>
|
||||
<div id="result">Last hold: 0 ms</div>
|
||||
<div id="live">Current hold: 0 ms</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const btn = document.getElementById("btn");
|
||||
const result = document.getElementById("result");
|
||||
const live = document.getElementById("live");
|
||||
|
||||
let startTime = 0;
|
||||
let holding = false;
|
||||
let rafId = 0;
|
||||
|
||||
function updateLive() {
|
||||
if (!holding) return;
|
||||
const now = performance.now();
|
||||
live.textContent = "Current hold: " + (now - startTime).toFixed(2) + " ms";
|
||||
rafId = requestAnimationFrame(updateLive);
|
||||
}
|
||||
|
||||
function startHold() {
|
||||
if (holding) return;
|
||||
holding = true;
|
||||
startTime = performance.now();
|
||||
updateLive();
|
||||
}
|
||||
|
||||
function endHold() {
|
||||
if (!holding) return;
|
||||
holding = false;
|
||||
cancelAnimationFrame(rafId);
|
||||
const duration = performance.now() - startTime;
|
||||
result.textContent = "Last hold: " + duration.toFixed(2) + " ms";
|
||||
live.textContent = "Current hold: 0 ms";
|
||||
}
|
||||
|
||||
btn.addEventListener("mousedown", startHold);
|
||||
btn.addEventListener("mouseup", endHold);
|
||||
btn.addEventListener("mouseleave", endHold);
|
||||
|
||||
btn.addEventListener("touchstart", (e) => {
|
||||
e.preventDefault();
|
||||
startHold();
|
||||
}, { passive: false });
|
||||
|
||||
btn.addEventListener("touchend", endHold);
|
||||
btn.addEventListener("touchcancel", endHold);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue