跳至主要内容

Svelte 附带了一些响应式类,你可以用它们来代替 JavaScript 内置对象——主要是 MapSetDateURLURLSearchParams

在本练习中,我们可以使用 $state(new Date()) 声明 date,并在 setInterval 内部重新赋值。但更好的选择是使用来自 svelte/reactivitySvelteDate

应用
<script>
	import { SvelteDate } from 'svelte/reactivity';

	let date = new SvelteDate();

	// ...
</script>

在 GitHub 上编辑此页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
	let date = new Date();
 
	const pad = (n) => n < 10 ? '0' + n : n;
 
	$effect(() => {
		const interval = setInterval(() => {
			date.setTime(Date.now());
		}, 1000);
 
		return () => {
			clearInterval(interval);
		};
	});
</script>
 
<p>The time is {date.getHours()}:{pad(date.getMinutes())}:{pad(date.getSeconds())}</p>