Question

我正在尝试编写一个程序，用户进入他们的生日并显示倒数计时器，并计算直到他们生日的几个小时和几小时。现在它不起作用，任何帮助都会很棒！谢谢！

<body>
    <script>

        var end = new Date();
        document.getElementById("myDate").value = end;
        var _second = 1000;
        var _minute = _second * 60;
        var _hour = _minute * 60;
        var _day = _hour * 24;
        var _month = _day * 30;
        var timer;

        function showRemaining() {


            var now = new Date();
            var distance = end - now;
            if (distance < 0) {
                clearInterval(timer);
                document.getElementById('countdown').innerHTML = 'EXPIRED!';
                return;
            }

            var months = Math.floor(distance / _month);
            var days = Math.floor((distance % _month) / _day);
            var hours = Math.floor((distance % _day) / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);

            document.getElementById('countdown').innerHTML = months + 'months ';
            document.getElementById('countdown').innerHTML += days + 'days ';
            document.getElementById('countdown').innerHTML += hours + 'hrs ';
            document.getElementById('countdown').innerHTML += minutes + 'mins ';
            document.getElementById('countdown').innerHTML += seconds + 'secs';
        }

        timer = setInterval(showRemaining, 1000);

    </script>

        Enter your birthday:
        <br>
        <input type="date" id="myDate">
        <br>
        <br>
        <input type="button" onclick="showRemaining()" value="Enter">


    <div id="countdown"></div>
</body>

Answer 1

你犯了很多错误，

脚本在元素加载之前加载。所以，它不能正常工作。始终在最后包含脚本或使用window.onload = (function() { [Your code] }());。这仅在dom加载后执行。
setInterval函数必须始终只在＆＃34;未过期时执行！＆＃34;。将它保留在函数内，以便只有倒计时才能再次运行。

主要问题是，您将日期字符串与0进行比较。您可以使用 Date.now()返回从1970年1月1日起的总毫秒数。并使用Date("User Input String which you provided")获取从1970年1月1日到该日期的总毫秒数，并查看非常准确的差异。

< / LI>

我建议使用单独的输入框或更格式化的输入。详细了解这些here。

也可以尝试使用＆＃39; buttonElement.addEventListener（＆＃34;点击＆＃34;，showRemaining）;`。

这应该有效：

<body>
<script>
    var end = new Date();
    document.getElementById("myDate").value = end;
    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var _month = _day * 30;
    var timer;

    function showRemaining() {
        var now = Date.now(); //CHANGE
        end = new Date(document.getElementById("myDate").value); //CHANGE
        var distance = end - now;
        if (distance < 0) {
            clearInterval(timer);
            document.getElementById('countdown').innerHTML = 'EXPIRED!';
            return;
        }

        var months = Math.floor(distance / _month);
        var days = Math.floor((distance % _month) / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        document.getElementById('countdown').innerHTML = months + 'months ';
        document.getElementById('countdown').innerHTML += days + 'days ';
        document.getElementById('countdown').innerHTML += hours + 'hrs ';
        document.getElementById('countdown').innerHTML += minutes + 'mins ';
        document.getElementById('countdown').innerHTML += seconds + 'secs';

        timer = setInterval(showRemaining, 1000); //CHANGE
    }
</script>

<!-- CHANGE -->
Enter your birthday:
<br />
<input type="date" id="myDate">
<br /><br />
<input type="button" onclick="showRemaining()" value="Enter">

Answer 2

此代码段修复了您的问题。问题是双重的。

document.getElementById("myDate").value = end;此声明已被撤销。您需要将字段的值放入end。此语句也会立即执行，这是没有用的。这已被两个事物（1）initDate函数所取代，以使日期字段具有初始值（如果这是您尝试执行的操作），以及（2）按钮上的事件侦听器。这样，当用户选择了一个日期并单击该按钮时，您就知道已经设置了一个值，并且可以放心地启动计时器。
日期。您拥有的input日期值采用YYYY-mm-dd格式，在连字符上需要split()才能正确创建new Date()。 Date库可能很难处理。创建日期时，很难确定它们是UTC还是本地。这个问题很容易搞砸你，所以请注意。

此代码应该是您正在寻找的代码，并且应该有助于澄清您在编写原始代码时可能没有理解的一些要点。它不一定是完美的（因为一个月被硬编码为30天），但这取决于你在寻找什么。如果您有任何其他问题，请与我们联系。

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var _month = _day * 30;
var timer;

initDate();

document.getElementById('startButton').addEventListener("click", function() {
  document.getElementById('value').innerHTML = document.getElementById("myDate").value;
  var splitValues = document.getElementById("myDate").value.split('-');
  var end = new Date(splitValues[0], splitValues[1] - 1, splitValues[2]);
  clearInterval(timer);
  showRemaining(end);
  timer = setInterval(showRemaining, 1000, end);
});

function showRemaining(end) {
  var now = new Date();
  var distance = end - now;
  if (distance < 0) {
    clearInterval(timer);
    document.getElementById('countdown').innerHTML = 'EXPIRED!';
    return;
  }

  var months = Math.floor(distance / _month);
  var days = Math.floor((distance % _month) / _day);
  var hours = Math.floor((distance % _day) / _hour);
  var minutes = Math.floor((distance % _hour) / _minute);
  var seconds = Math.floor((distance % _minute) / _second);

  document.getElementById('countdown').innerHTML = months + 'months ';
  document.getElementById('countdown').innerHTML += days + 'days ';
  document.getElementById('countdown').innerHTML += hours + 'hrs ';
  document.getElementById('countdown').innerHTML += minutes + 'mins ';
  document.getElementById('countdown').innerHTML += seconds + 'secs';
}

function initDate() {
  var defaultDate = new Date();
  var month;
  if(defaultDate.getMonth() + 1 > 9) {
    month = "" + (defaultDate.getMonth() + 1);
  } else {
    month = '0' + (defaultDate.getMonth() + 1);
  }
  document.getElementById("myDate").value = defaultDate.getFullYear() + '-' + month + '-' + defaultDate.getDate();
}

<input id="myDate" type="date">
<button id="startButton">Start Countdown</button>
<div id="value"></div>
<div id='countdown'></div>

我在下面列出了“更准确”的版本，因为它很容易更改。

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;

initDate();

document.getElementById('startButton').addEventListener("click", function() {
  document.getElementById('value').innerHTML = document.getElementById("myDate").value;
  var splitValues = document.getElementById("myDate").value.split('-');
  var end = new Date(splitValues[0], splitValues[1] - 1, splitValues[2]);
  clearInterval(timer);
  showRemaining(end);
  timer = setInterval(showRemaining, 1000, end);
});

function showRemaining(end) {
  var now = new Date();
  var distance = end - now;
  if (distance < 0) {
    clearInterval(timer);
    document.getElementById('countdown').innerHTML = 'EXPIRED!';
    return;
  }

  var days = Math.floor(distance / _day);
  var hours = Math.floor((distance % _day) / _hour);
  var minutes = Math.floor((distance % _hour) / _minute);
  var seconds = Math.floor((distance % _minute) / _second);

  document.getElementById('countdown').innerHTML = days + ' days ';
  document.getElementById('countdown').innerHTML += hours + ' hrs ';
  document.getElementById('countdown').innerHTML += minutes + ' mins ';
  document.getElementById('countdown').innerHTML += seconds + ' secs';
}

function initDate() {
  var defaultDate = new Date();
  var month;
  if (defaultDate.getMonth() + 1 > 9) {
    month = "" + (defaultDate.getMonth() + 1);
  } else {
    month = '0' + (defaultDate.getMonth() + 1);
  }
  document.getElementById("myDate").value = defaultDate.getFullYear() + '-' + month + '-' + defaultDate.getDate();
}

<input id="myDate" type="date">
<button id="startButton">Start Countdown</button>
<div id="value"></div>
<div id='countdown'></div>

Answer 3

您的代码存在许多问题，如其他答案中所述，我将解释：

脚本在DOM中存在元素之前运行，因此尝试引用它们会返回 null ，并且在尝试设置其属性时会出现错误。
< / LI>
end 设置为页面加载，因此它在函数运行时始终处于过去状态，因此end - now要么零（可能是最初的）或负数（分配给 end 后超过1毫秒）。
该按钮将允许 setInterval 的多个实例运行，因此您将获得一些相当混乱的结果，因为他们都试图设置<的值EM>倒计时
如果主持人观察夏令时，计算是有缺陷的，因为每个月没有30天，也不是每天24小时。解决这个问题并不难，但我不打算在这里修复它。
不要使用输入类型Date，支持是不完整的。您可以测试支持并处理不支持的情况，但这项练习有点多。

因此，不要启动计时器直到按下按钮（或加载页面后的其他一些事件），停止当前正在运行的任何计时器并重置 end 时间。

请注意， setInterval 会漂移，因为它不会在每秒钟都运行，因此它会不时地跳过两秒钟。此外，应处理无效的日期输入。两者都可以修复，但超出范围。 ;-)

＆＃13;

// Don't set the value for end until the button is pressed.
var end; // = new Date();
         // document.getElementById("myDate").value = end;

// Also need a global timer reference so it can be cancelled when required		 
var timer;

// Since listener is attached by addEventListener, event will only be passed
// if the call comes from the button
function showRemaining(event) {
  // Function to cancel the timer
  function stopTimer(){
    if (timer) {
	  clearInterval(timer);
	  end = timer = null;
	}
  }
  
  // Keep these local
  var _second = 1000;
  var _minute = _second * 60;
  var _hour = _minute * 60;
  var _day = _hour * 24;
  var _month = _day * 30;
  
  // If click came from the button or timer isn't set, restart the timer
  if (event || !timer) {
    stopTimer();
	timer = setInterval(showRemaining, 1000);
  }

  // Get the current date
  var now = new Date();
  
  // Get the value of countdown and parse it, see parsing function
  // If end isn't set, set it
  if (!end) end = parseDateDMY(document.getElementById("myDate").value);
  var distance = end - now;
 
  // If gone past end, stop the timer 
  if (distance < 0) {
    stopTimer();
    document.getElementById('countdown').innerHTML = 'EXPIRED!';

  } else {
    var months = Math.floor(distance / _month);
    var days = Math.floor((distance % _month) / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    // Write the time remaining directly to the element
    document.getElementById('countdown').innerHTML = months + 'months ' +            
	                                                 days + 'days ' +
													 hours + 'hrs ' +
													 minutes + 'mins ' +
													 seconds + 'secs';
  }
}

// No need to do this, wait for button click
// timer = setInterval(showRemaining, 1000); 

// Parse date string in format d/m/y
function parseDateDMY(s) {
  var b = s.split(/\D/);
  var d = new Date(b[2], --b[1], b[0]);
  return d && d.getMonth() == b[1]? d : new Date(NaN);
}

// Add listener to button
window.onload = function() {
  document.getElementById('startButton').addEventListener('click',showRemaining,false);
}

＆＃13;

Enter your birthday:<br>
<input type="text" id="myDate" value="21/6/2016">d/m/y<br>
<input type="button" id="startButton" value="Start counting"><br>
<div id="countdown"></div>

＆＃13;

生日倒计时

3 个答案: