使用 Svelte 冻结倒计时

Question

我正在尝试使用 Svelte 创建倒计时。但不知何故，输出不是动态的，它不会改变，直到我刷新页面，然后值才会改变。我的代码中可能存在逻辑错误。有什么可以开始的吗？或者它只是 svelte 的编译器一直在窃听？谢谢

    import { tweened } from 'svelte/motion';
    var expected = new Date("Feb 5, 2021 15:37:25").getTime();
    var now = new Date().getTime();
    let distance = tweened(expected-now);

    setInterval(()=> {
        if ($distance > 0){
            $distance-=1;
        }
    },1000)
  $: days = Math.floor($distance / (1000 * 60 * 60 * 24));
  $: hours = Math.floor(($distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  $: minutes = Math.floor(($distance % (1000 * 60 * 60)) / (1000 * 60));
  $: seconds = Math.floor(($distance % (1000 * 60)) / 1000);

Answer 1

您的代码存在逻辑问题 - 您每秒仅从 distance 中减去 1 毫秒，而不是 1000 毫秒（1 秒）。

如果您将代码更新为一次减去 1000 毫秒而不是 1 毫秒，倒计时将按预期工作。

setInterval(()=> {
    if ($distance > 0){
        $distance -= 1000;
    }
}, 1000)

使用 Svelte 冻结倒计时

Countdown Freeze using Svelte

javascript

svelte

svelte-component