我如何在Elm页面上添加一个向下计数计时器？

Question

对Elm来说还很陌生，我一直在努力地进行测验，同时努力奋斗。我需要的是一个从10向下计数到1的计时器，一旦达到1，它就会切换到另一页。我试过使用Elms网站的时间示例以及Elm-timer库，但是都没有成功。

该代码正在使用：

 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 ] 

非常感谢您的帮助！

Answer 1

Answer to my question，一个简单的倒数计时器。