javascript的实时表单倒计时计时器

Real-time form countdown timer with javascript

本文关键字：倒计时 计时器 表单 实时 javascript      更新时间：2023-09-26

请原谅我的语法/拼写

所以，我正在搜索如何用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?

看这个:

$(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>

相关文章：