javascript - 使用 JavaScript 的实时表单倒计时器

Question

_{请原谅我的语法/拼写}

所以，我是searching about how to make a countdown timer使用javascript，但我希望它位于<form>中，所以当用户输入一些数字(变成秒)，然后单击“开始”时，计时器就会启动。但是，我坚持开发脚本。

这是正文:

$('#detik').keyup(function() {
  var sec = $(this).val();
});

var display = document.querySelector('#time'),
  timer = new CountDownTimer(sec),
  timeObj = CountDownTimer.parse(sec);
format(timeObj.minutes, timeObj.seconds);

timer.onTick(format);

$('#timerb').click(function() {
  timer.start();
});

function format(minutes, seconds) {
  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;
  display.textContent = minutes + ':' + seconds;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/robbmj/simple-js-countdown-timer/master/countdowntimer.js"></script>


<div class="text-center">
  <h1 id="time"></h1>
</div>
<div class="text-center">
  <form id="formtimer" name="formtimer" class="form-inline" action="#" method="post">
    <input type="number" class="form-control" id="detik" placeholder="How many secs?">
    <button class="btn btn-default" type="submit" id="timerb">Start!</button>
  </form>
</div>

我的脚本出了什么问题？为什么我无法显示 00:00？

Answer 1

看这个:

$(function(){
    $('#timerb').click(function() {
        var sec     = $("#detik").val();
        var timer   = new CountDownTimer(sec);
        var timeObj = CountDownTimer.parse(sec);
        
        format(timeObj.minutes, timeObj.seconds);
        timer.onTick(format);
        timer.start();
    });

    function format(minutes, seconds) {
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        
        var display = document.querySelector('#time');
        display.textContent = minutes + ':' + seconds;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/robbmj/simple-js-countdown-timer/master/countdowntimer.js"></script>


<div class="text-center">
  <h1 id="time"></h1>
</div>
<div class="text-center">
  <form id="formtimer" name="formtimer" class="form-inline" action="#" method="post">
    <input type="number" class="form-control" id="detik" placeholder="How many secs?">
    <button class="btn btn-default" type="button" id="timerb">Start!</button>
  </form>
</div>