从两个posix时间戳在Elm中创建倒计时

module Main exposing (main)

import Browser
import Html exposing (Html, div, text)
import Time exposing (Posix, diff, fromMillis, toMillis)
import Task exposing (Task)

type alias Model = {
    countdown: Int
}

type Msg
    = Tick Time.Posix
    | StartCountdown Posix Posix

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Tick currentTime ->
            let
                remainingTime =
                    model.countdown - (diff currentTime model.countdown |> toMillis |> fromMillis |> toMillis // 1000)
            in
            if remainingTime <= 0 then
                ( { model | countdown = 0 }, Cmd.none )
            else
                ( { model | countdown = remainingTime }, Cmd.none )

        StartCountdown endTime startTime ->
            let
                countdown =
                    diff endTime startTime |> toMillis |> fromMillis |> toMillis // 1000
            in
            ( { model | countdown = countdown }, Cmd.none )

view : Model -> Html Msg
view model =
    div []
        [ text ("Countdown: " ++ String.fromInt model.countdown ++ " seconds") ]

subscriptions : Model -> Sub Msg
subscriptions model =
    Time.every (1000 * Time.millisecond) Tick

main : Program () Model Msg
main =
    Browser.element
        { init = \() -> ( { countdown = 0 }, Cmd.none )
        , view = view
        , update = update
        , subscriptions = subscriptions
        }