You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
svelte/site/content/examples/7guis-timer/App.svelte

41 lines
745 B

<!-- https://eugenkiss.github.io/7guis/tasks#timer -->
<script>
import { onDestroy } from 'svelte';
let elapsed = 0;
let duration = 5000;
let last_time = window.performance.now();
let frame;
(function update() {
frame = requestAnimationFrame(update);
const time = window.performance.now();
elapsed += Math.min(
time - last_time,
duration - elapsed
);
last_time = time;
}());
onDestroy(() => {
cancelAnimationFrame(frame);
});
</script>
<label>
elapsed time:
<progress value="{elapsed / duration}"></progress>
</label>
<div>{(elapsed / 1000).toFixed(1)}s</div>
<label>
duration:
<input type="range" bind:value={duration} min="1" max="20000">
</label>
<button on:click="{() => elapsed = 0}">reset</button>