Javascript倒计时

时间:2014-09-23 21:21:48

标签: javascript

我试图创建一个倒计时。 基本上我有一个客户端下订单的时间(以dateTime格式存储在db中,例如。" 2014-08-14 12:52:09")我也有时间完成订单(以小时和分钟为单位" 1" 45"或只是几分钟" 45")。

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

我从db那里得到了这个 订购时间----> 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);

}

非常感谢任何帮助。

3 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:1)

我想为此推荐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);

}

当然,请记住,这个特殊的例子是不正确的,因为差异太大(只有差异小于一个月才会起作用),但是因为你在你的提到中它不应该是一个问题原始帖子,差异通常应以小时而非年数来衡量。

答案 2 :(得分:1)

我真的考虑使用:

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););