Javascript Countdown

Javascript Countdown

本文关键字：Countdown Javascript      更新时间：2023-09-26

我正在尝试创建一个倒计时。基本上，我有客户下订单的时间（以dateTime格式存储在数据库中，例如"2014-08-14 12:52:09"），我也有完成订单所需的时间（可以是小时和分钟"1"45"，也可以是分钟"45"）

我从网上得到了一个倒计时脚本，我很难弄清楚如何格式化这两次，以便脚本理解。

我从数据库得到的订单时间---->12:52:09到期时间--->45分钟

到期时间有时也可能包括小时：例如：有效期--->1小时45分钟。

我从网上得到的脚本，我现在把它放在一个函数里：

JS:

  function clockTicking(){
 // set the date we're counting down to
   var target_date = new Date("Aug 15, 2019").getTime();
   // variables for time units
   var days, hours, minutes, seconds;
   // get tag element

  // update the tag with id "countdown" every 1 second
   setInterval(function () {
     // find the amount of "seconds" between now and target
     var current_date = new Date().getTime();
     var seconds_left = (target_date - current_date) / 1000;
     // do some time calculations
     days = parseInt(seconds_left / 86400);
     seconds_left = seconds_left % 86400;
     hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
   // format countdown string + set tag value
   $('.countdown').html(days + "d, " + hours + "h, "+ minutes + "m, " + seconds + "s");  
  }, 1000);
}

任何帮助都将不胜感激。

您可以将脚本的开头更改为这个

function setTimer(hours, minutes, dateTime){
   var date = new Date(dateTime);
   date.setHours(date.getHours() + hours);
   date.setMinutes(date.getMinutes() + minutes);
   var target_date = date.getTime();
   // rest of script
   }

然后用setTimer(1,30, "2014 09 24 00:23")调用它，设置相对于2014-09-24 01:53 的倒计时

点击此处查看：jsFiddle

我想推荐Moment.js（以及任何类型的日期/时间解析）。虽然编写自己的函数可能看起来很诱人，但通常有很多事情需要考虑，这根本不值得

使用Moment.js，你想要实现的目标可以这样做：

function clockTicking(){
    var target_date = moment('Aug 15, 2019', 'MMM DD, YYYY');
    // update the tag with id "countdown" every 1 second
    setInterval(function () {
        var moment_diff = moment.duration(target_date.diff(moment()));
        // format countdown string + set tag value
        $('.countdown').html(moment_diff.days() + "d, " + moment_diff.hours() + "h, "+ moment_diff.minutes() + "m, " + moment_diff.seconds() + "s");
    }, 1000);
}

当然，请记住，这个特定的例子是不正确的，因为差异太大（只有当差异小于一个月时才有效），但这应该不是问题，因为你在最初的帖子中提到，差异通常应该以小时而不是年来衡量。

我真的会考虑使用：

http://momentjs.com/docs/

如果你在处理相当多的约会时间。

然而，您似乎在将两种时间格式转换为日期-时间对象时遇到了问题？

  var stripNonNumberics = function(string) {
    return Number(string.replace(/'D/g, ''));
  }
  var target_date = "1hour 45minutes"; // or var target_date = "45minutes";
  var split_date = target_date.split(' ');
  var minutes;
  // If it has hours
  if (split_date[1]) {
    minutes = stripNonNumberics(split_date[1]) + (stripNonNumberics(split_date[0]) * 60);
  } else {
    minutes = stripNonNumberics(split_date[0]);
  }
  console.log(new Date(new Date().getTime() + minutes*60000););
相关文章：