mirror of https://github.com/sveltejs/svelte
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.
41 lines
745 B
41 lines
745 B
6 years ago
|
<!-- 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>
|