时间戳

首页 > 解决方案 > Jquery 得到现在和未来日期之间的不正确差异

javascript - Jquery 得到现在和未来日期之间的不正确差异

问题描述

我试图编写一个计数器。对于第一个值，它应该显示今天和未来日期之间的差异。出于某种原因，它显示出完全错误的差异。你知道为什么吗？

设置的未来日期 2020 年 10 月 2 日应输出 15 天且不超过 40 天的差异。

const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
const firstDate = new Date(2020, 10, 02);
const secondDate = new Date();
const diffDays = Math.round(Math.abs((firstDate - secondDate) / oneDay));
jQuery('#reducedaily').text(diffDays);

jQuery('.count, .count2').each(function () {
  jQuery(this).prop('Counter',0).animate({
    Counter: jQuery(this).text()
  }, {
      duration: 4000,
      easing: 'swing',
      step: function (now) {
        if(jQuery(this).hasClass('count')){
          jQuery(this).text(now.toFixed(0));
        }
        else{
          jQuery(this).text(now.toFixed(1));
        }
      }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="counterbackground" class="shadow">
<div class="counterdiv"><span class="count countervalue" id="reducedaily">239</span><br> <span class="counterdescription">Tage bis zum Event<br> (2.10.2020)</span></div>
</div>

标签： javascriptjquerydate

解决方案

Date在 jQuery的函数中使用“月份”参数时，月份是 0 索引的，因此它们从 0 开始，而不是您可能期望的 1。因此，当您通过 时10，它实际上代表 11 月而不是 10 月 - 这就是为什么您比预期多获得 30 天的原因。

有很多方法可以指定日期（请参阅MDN Web Docs for Date）。例如，其中任何一个都将为 2020 年 10 月 2 日创建一个日期对象：

firstDate = new Date(2020, 09, 02);     // when using the month param, it is (month-1)
firstDate = new Date("2020-10-02");     // note you DO use "10" in a date string
firstDate = new Date("10/02/2020");     // note mm/dd/yyyy format
firstDate = new Date("2 October 2020"); // or you can use text

使用您的代码的工作示例

const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
const firstDate = new Date(2020, 09, 02);
const secondDate = new Date();
const diffDays = Math.round(Math.abs((firstDate - secondDate) / oneDay));
jQuery('#reducedaily').text(diffDays);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="counterdiv"><span class="count countervalue" id="reducedaily">239</span><br> <span class="counterdescription">Tage bis zum Event<br>(2.10.2020)</span></div>

测试日期字符串的工作示例

const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
const secondDate = new Date();

$("#testdate").on("click", function() {
   dateStr = $("#date_to_check").val(); 
   showDate(dateStr, "days_left");
});

   
showDate("2020-10-02", "days_left_test");
showDate("10/02/2020", "days_left_test");
showDate("2 October 2020", "days_left_test");
showDate("October 02 2020", "days_left_test");

function showDate(dateStr, elid){
    document.getElementById(elid).innerHTML += "Date: <b>"+dateStr+" </b> &nbsp;&nbsp;&nbsp; Days left: <b>"+ Math.round(Math.abs((new Date(dateStr) - secondDate) / oneDay))+"</b><br>";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<p>Test a date:</p>
<input type="text" id="date_to_check" placeholder="Enter date string">
<button id="testdate">Test</button>
<div id="days_left" style="margin-bottom: 20px"></div>

<p><b>More date Tests:</b></p>
<div id="days_left_test"></div>

推荐阅读