Time 如何将向下计数计时器添加到Elm页面？

我对Elm很陌生，我一直在努力尝试做一个小测验。我需要的是一个计时器，从10向下计数到1，一旦它达到1，它就会切换到另一页。我尝试过使用Elm网站上的时间示例以及Elm计时器库，但都没有成功

我正在使用的代码：

 module QuizPage exposing (..)

import Browser
import Browser.Navigation as Nav
import Html exposing (..)
import Html.Attributes exposing (..)
import Url
import Html.Events exposing (..)



-- MAIN


main : Program () Model Msg
main =
  Browser.application
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    , onUrlChange = UrlChanged
    , onUrlRequest = LinkClicked
    }



-- MODEL


type alias Model =
  { key : Nav.Key
  , url : Url.Url
  , uporabnik : String
  , igra : Int
  }


init : () -> Url.Url -> Nav.Key -> ( Model, Cmd Msg )
init flags url key =
  ( Model key url "" 0, Cmd.none )



-- UPDATE


type Msg
  = LinkClicked Browser.UrlRequest
  | UrlChanged Url.Url
  | SpremembaImena String


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
  case msg of
    LinkClicked urlRequest ->
      case urlRequest of
        Browser.Internal url ->
             ( model, Nav.load (Url.toString url) )


        Browser.External href ->
          ( model, Nav.load href )

    UrlChanged url ->
      ( { model | url = url }
      , Cmd.none
      )

    SpremembaImena ime ->
      ({model | uporabnik = ime}, Cmd.none)


-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions _ =
  Sub.none



-- VIEW



view : Model -> Browser.Document Msg
view model =
    {
     title = "Kviz"
     , body =
        [div [style "width" "100%",  style "text-align" "center", style "background-color" "powderblue", style "position" "fixed", style "width" "100%", style "height" "100%"]
        [ Html.br[][]
        , Html.div [style "width" "100%", style "font-size" "20px"][ Html.div[][Html.text "Koda vaše igre: 1234"], Html.div [][Html.text "Čas do konca 7s"] ]
        , Html.br [][]
        , Html.br [][]
        , Html.br [][]
        , Html.br [][]
        , div [style "font-size" "30px"][Html.text "Vprašanje"]
        , Html.br [][]
        , Html.br [][]
        , Html.br [][]
        , Html.br [][]
        , Html.div [ style "margin-left" "43%" ][ viewLink "EndPage.elm" "Odgovor1"]
        , Html.br [][]
        , Html.br [][]
        , Html.div [ style "margin-left" "43%"][ viewLink "EndPage.elm" "Odgovor2"]
        , Html.br [][]
        , Html.br [][]
        , Html.div [ style "margin-left" "43%" ][ viewLink "EndPage.elm" "Odgovor3"]
        , Html.br [][]
        , Html.br [][]
        , Html.div [ style "margin-left" "43%" ][ viewLink "EndPage.elm" "Odgovor4"]
        ]]
    }


viewLink : String -> String -> Html msg
viewLink path name =
   a [ href path , style "text-decoration" "none", style "color" "black", style "width" "200px", style "magin-left" "200px", style "display" "block", style "font" "bold 11px Arial", style "border-top" "1px solid #CCCCCC", style "text-decoration" "none", style "background-color" "#EEEEEE", style "color" "#333333", style "padding" "2px 6px 2px 6px", style "border-right" "1px solid #CCCCCC", style "border-bottom" "1px solid #CCCCCC", style "border-left" "1px solid #CCCCCC", style "align" "center" ] [ text name ] 

非常感谢您的帮助

我的问题的关键是一个简单的倒计时计时器

榆树：

HTML:

/*你可以在这里设计你的程序*/ var app=Elm.Main.init{node:document.querySelector'Main} //你可以在这里使用端口之类的东西

---

有什么问题吗？@glennsl我似乎找不到办法。它要么不起作用，要么过时了。你具体试过什么？你提到了几种不同的方法，但没有提到为什么它们对你不起作用。我已经找到了。无论如何，谢谢你的解决方案：@DavidBorštner当时的问题是什么？如果您发布一个以描述作为答案的解决方案，可能会对其他人有所帮助吗？更好：订阅模型=如果model.cas>0，则为Time.every 1000 Tick else Sub.none

module Main exposing (..)

import Browser
import Html exposing (..)
import Task
import Time

-- MAIN

main =
  Browser.element
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }

-- MODEL

type alias Model =
  { 
   cas : Int
  }

init : () -> (Model, Cmd Msg)
init _ =
  ( Model  10, Cmd.none
  )

-- UPDATE

type Msg
  = Tick Time.Posix

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Tick newTime ->
      if model.cas == 0 then
         ( { model | cas = 0 }
         , Cmd.none
         ) 
      else
         ( { model | cas = (racun model) }
         , Cmd.none
         )

-- SUBSCRIPTIONS

subscriptions : Model -> Sub Msg
subscriptions model =
  Time.every 1000 Tick

racun : Model -> Int 
racun model =
   model.cas - 1

-- VIEW

view : Model -> Html Msg
view model =
  let
    first = String.fromInt (model.cas)
  in
  h1 [] [ text (first) ]