具有用户输入的Javascript倒数计时器 [英] Javascript Countdown Timer with User input

问题描述

我正在尝试创建一个倒数计时器，用户可以在其中输入日，时，分和秒值的任意组合，并使其倒数完成。我觉得我已经准备就绪，但是在尝试解决这个问题一周之后，我需要帮助。我对代码进行了混编，效果各不相同。基本上，我觉得我缺少一种可用于从当前日期减去日期的格式来格式化输入数据的方法，但是说实话我不知道。任何输入都会有帮助。

I am trying to create a countdown timer where the user can input any combination of day, hour, minute, and seconds values and have it countdown to completion. I feel like I've got all the pieces but after a week of trying to solve this issue, I need help. I shuffle code around all with varying effects. Basically I feel like I'm missing a way to format the input data in a way I can use to subtract from the current date, but honestly I have no idea. Any input would be helpful.

JavaScript：

function start() {
  var countdownTimer = setInterval('timer()', 1000);
}

function timer() {
  var d = parseInt(document.getElementById("days").value, 0);
  var h = parseInt(document.getElementById("hours").value, 0);
  var m = parseInt(document.getElementById("minutes").value, 0);
  var s = parseInt(document.getElementById("seconds").value, 0);

  var now = new Date();
  var date = now.getTime();

  addDay = now.setDate(now.getDate() + d);
  addHour = now.setHours(now.getHours() + h);
  addMinute = now.setMinutes(now.getMinutes() + m);
  addSecond = now.setSeconds(now.getSeconds() + s);

  var then = new Date(addHour + addMinute + addSecond);

  if(d > 0 || h > 0 || m > 0 || s > 0){
    var final = then - date;
    var dd = Math.floor(final/ (1000 * 60 * 60 * 24));
    var hh = Math.floor((final / (1000 * 60 * 60)) % 24);
    var mm = Math.floor((final / 1000 / 60) % 60);
    var ss = Math.floor((final / 1000) % 60);

    document.getElementById("display").innerHTML = "Time Remaining: " + dd + "D     " + hh + "H " + mm + "M " + ss + "S";

    document.getElementById("message").innerHTML = then;

    if (final < 0) {
      clearInterval(countdownTimer);
      document.getElementById("message").innerHTML = "Expired";
    }
  }else{
    document.getElementById("display").innerHTML = " ";
    document.getElementById("message").innerHTML = "Countdown Not Started";
  }
}

HTML：

<div id="countdowntimer">
  <button id="Start" onclick="start();">Start Timer</button>

  D:<input type="text" id="days" value="0" /> 
  H:<input type="text" id="hours" value="0" /> 
  M:<input type="text" id="minutes" value="0" />
  S:<input type="text" id="seconds" value="0" /><br>

  <div id="display"></div>

  <div id="message"></div>
</div>

推荐答案

如果您的计时器不是基于日期，而是基于给定天数，小时数，分钟数和秒数，为什么还要涉及日期？怎么样

If your timer is not based on date but on a given number of days, hours, minutes and seconds, why involve dates at all ? How about

function timer(){
    var d = parseInt(document.getElementById("days").value, 0);
    var h = parseInt(document.getElementById("hours").value, 0);
    var m = parseInt(document.getElementById("minutes").value, 0);
    var s = parseInt(document.getElementById("seconds").value, 0);

    var current = ((d * 86400) + (h * 3600) + (m * 60) + s);  //the current time left in seconds
    if (current > 0) {
        //take one second away, and rerender the seconds split into d, h, m, and s in the html, which you will reuse next time timer() runs
    } else {
        //expired
    }
}

这篇关于具有用户输入的Javascript倒数计时器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！