带有JavaScript的实时表单倒数计时器

Question

_{Pardon my grammar/spelling}

So, I was searching about how to make a countdown timer with javascript, but I want it to be in <form> , so when the user typed some numbers (which became the seconds), and then they click "Start", the timer will be started. But, I stuck in developing the script.

Here's the body:

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

What's wrong with my script? Why I can't show the 00:00 ?

Answer 1

Look this:

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