JS 中的倒数计时器 - 不知道该怎么做

Question

我想用 JavaScript 中的用户输入创建倒数计时器（不是 jQuery 或其他技术）。

HTML: https://codepen.io/anon/pen/LewOLe

    <div class='countdown'>
        <div class='times'><span class='inputData'>Hours: </span>
            <input class='hours' type="number" min='0'/> 
        </div>

        <div class='times'> <span class='inputData'>Minutes: </span>
            <input class='mins' type="number"  min='0' max='59' /> 
        </div>

        <div class='times'><span class='inputData'>Seconds: </span>
            <input class='secs' type="number" min='0' max='59' /> 
        </div>

        <button class='countBtn'>START</button>
        <div class='count'>
            <span>00</span>
            <span>00</span>
            <span>00</span>
        </div>
    </div>

通过使用JS我想从输入中获取数据，单击开始并在div class 'count'.

中开始计数

帮助:)

Answer 1

HTML

    <div class='countdown'>
        <div class='times'><span class='inputData'>Hours: </span>
            <input id="inputHour" class='hours' type="number" min='0'/> 
        </div>

        <div class='times'> <span class='inputData'>Minutes: </span>
            <input id="inputMinutes" class='mins' type="number"  min='0' max='59' /> 
        </div>

        <div class='times'><span class='inputData'>Seconds: </span>
            <input id="inputSeconds" class='secs' type="number" min='0' max='59' /> 
        </div>

        <button class='countBtn' onclick="setTime();">START</button>
        <div id="timer" class='count'>
          <span id="hourCount"></span><span>:</span>              <span id="minuteCount"></span><span>:</span>              <span id="secondCount"></span>
        </div>
    </div>

简单明了javascript

function setTime(){
  var hour = document.getElementById("inputHour").value;
  var minutes = document.getElementById("inputMinutes").value;
  var seconds = document.getElementById("inputSeconds").value;
initiateTimer(hour, minutes, seconds);
}

function initiateTimer(hour,minutes,seconds){
  document.getElementById('hourCount').innerHTML =hour;
  document.getElementById('minuteCount').innerHTML =minutes;
  document.getElementById('secondCount').innerHTML =seconds;
  startTimer();
}

function startTimer() {
  var h = parseInt(document.getElementById("hourCount").innerHTML);
  var m = checkMinute(parseInt(document.getElementById("minuteCount").innerHTML));
  var s = checkSecond((parseInt(document.getElementById("secondCount").innerHTML)) - 1);
  if(s==59){m=m-1};
  if(m==59&&s==58){h=h-1};
  if(h<0){return 0;}

  document.getElementById("hourCount").innerHTML = "";
document.getElementById("hourCount").innerHTML = h; document.getElementById("minuteCount").innerHTML = "";
  document.getElementById("minuteCount").innerHTML = m;
  document.getElementById("secondCount").innerHTML = "";
  document.getElementById("secondCount").innerHTML = s;
  setTimeout(startTimer, 1000);
}

function checkSecond(sec) {
  if (sec < 10 && sec >= 0) {sec = "0" + sec};
  if (sec < 0) {sec = "59"};
  return sec;
}

function checkMinute(minute) {
  if (minute < 0) {minute = "59"};
  return minute;
}

此代码可能存在一些问题，但它非常适合您的问题要求。 :-)

希望我有所帮助。我也是 javascript.

的新手

是的，我知道那一分钟会变为 -1 秒，任何更正它的编辑都会很乐意接受:-)

密码本：https://codepen.io/anon/pen/GyVyeq

JS 中的倒数计时器 - 不知道该怎么做

Countdown timer in JS - no idea how do it

timer

countdown