每日倒數時鐘

Question

我想在我的某個網站上添加一個「每日倒計時」，以獲得其中一個促銷優惠。

基本上我希望每天晚上在午夜重置時鐘，所以在午夜它會說'剩下0天，24小時，0分鐘，0秒'。

我有一個倒計時，你可以在這裏看到的具體日期代碼： -

http://jsfiddle.net/7dso7d1x/

HTML：

<div id="countdown"> 
    <p class="days">00</p> 
    <p class="timeRefDays">days</p> 
    <p class="hours">00</p> 
    <p class="timeRefHours">hours</p> 
    <p class="minutes">00</p> 
    <p class="timeRefMinutes">minutes</p> 
    <p class="seconds">00</p> 
    <p class="timeRefSeconds">seconds</p> 
</div> 

CSS：

#countdown p { 
    display: inline-block; 
    padding: 5px; 
    background: #EEE; 
    margin: 0 0 20px; 
} 

的jQuery ：

(function (e) { 
    e.fn.countdown = function (t, n) { 
    function i() { 
     eventDate = Date.parse(r.date)/1e3; 
     currentDate = Math.floor(e.now()/1e3); 
     if (eventDate <= currentDate) { 
      n.call(this); 
      clearInterval(interval) 
     } 
     seconds = eventDate - currentDate; 
     days = Math.floor(seconds/86400); 
     seconds -= days * 60 * 60 * 24; 
     hours = Math.floor(seconds/3600); 
     seconds -= hours * 60 * 60; 
     minutes = Math.floor(seconds/60); 
     seconds -= minutes * 60; 
     days == 1 ? thisEl.find(".timeRefDays").text("day") : thisEl.find(".timeRefDays").text("days"); 
     hours == 1 ? thisEl.find(".timeRefHours").text("hour") : thisEl.find(".timeRefHours").text("hours"); 
     minutes == 1 ? thisEl.find(".timeRefMinutes").text("minute") : thisEl.find(".timeRefMinutes").text("minutes"); 
     seconds == 1 ? thisEl.find(".timeRefSeconds").text("second") : thisEl.find(".timeRefSeconds").text("seconds"); 
     if (r["format"] == "on") { 
      days = String(days).length >= 2 ? days : "0" + days; 
      hours = String(hours).length >= 2 ? hours : "0" + hours; 
      minutes = String(minutes).length >= 2 ? minutes : "0" + minutes; 
      seconds = String(seconds).length >= 2 ? seconds : "0" + seconds 
     } 
     if (!isNaN(eventDate)) { 
      thisEl.find(".days").text(days); 
      thisEl.find(".hours").text(hours); 
      thisEl.find(".minutes").text(minutes); 
      thisEl.find(".seconds").text(seconds) 
     } else { 
      alert("Invalid date. Example: 30 Tuesday 2013 15:50:00"); 
      clearInterval(interval) 
     } 
    } 
    thisEl = e(this); 
    var r = { 
     date: null, 
     format: null 
    }; 
    t && e.extend(r, t); 
    i(); 
    interval = setInterval(i, 1e3) 
    } 
    })(jQuery); 
    $(document).ready(function() { 
    function e() { 
     var e = new Date; 
     e.setDate(e.getDate() + 60); 
     dd = e.getDate(); 
     mm = e.getMonth() + 1; 
     y = e.getFullYear(); 
     futureFormattedDate = mm + "/" + dd + "/" + y; 
     return futureFormattedDate 
    } 
    $("#countdown").countdown({ 
     date: "8 September 2014 09:00:00", // Change this to your desired date to countdown to 
     format: "on" 
    }); 
}); 

只是想知道如何實現這一點，以便每天午夜自動重置。

編輯::

我想如下做到這一點： -

var d = new Date(); 

var month = d.getMonth()+1; 
var day = d.getDate(); 

var output = d.getFullYear() + '/' + 
    ((''+month).length<2 ? '0' : '') + month + '/' + 
    ((''+day).length<2 ? '0' : '') + day; 


$('#clock').countdown("'"+output+"'").on('update.countdown', function (event) { 
    var $this = $(this).html(event.strftime('' + '<span>%-w</span> week%!w ' + '<span>%-d</span> day%!d ' + '<span>%H</span> hr ' + '<span>%M</span> min ' + '<span>%S</span> sec')); 
}); 

然後，我想我可以設置日期爲日期+ 1，但我不能似乎得到上面的代碼工作，任何想法？

Answer 1

你可以參考下面的代碼：

• jsfiddle

  <div id="clock"></div> 
  
  $('#clock').countdown('2015/09/08').on('update.countdown', function (event) { 
  var $this = $(this).html(event.strftime('' + 
  '<span>%-w</span> week%!w ' + '<span>%-d</span> day%!d ' + 
  '<span>%H</span> hr ' + '<span>%M</span> min ' + 
  '<span>%S</span> sec'));}); 
  

您也可以通過jQuery.countdown參考例子：

• ​​

更新jsfiddle，基本上以重置日常它會像：

<div id="clock"></div> 
var date = new Date(); 
date.setDate(date.getDate() + 1); 

$('#clock').countdown(date).on('update.countdown', function (event) { 
    var $this = $(this).html(event.strftime('' + '<span>%-d</span> day%!d ' + '<span>%H</span> hr ' + '<span>%M</span> min ' + '<span>%S</span> sec')); 
}); 

Answer 2

好了，感謝@Moein Almasi酒店 - 我設法得到我需要的，你可以看到下面的結果： -

HTML：

<div id="clock"></div> 

CSS：

#clock { 
    display: inline-block; 
    padding: 5px; 
    background: #EEE; 
    margin: 0 0 20px; 
} 

的jQuery ::

var d = new Date(); 

var month = d.getMonth()+1; 
var day = d.getDate()+1; 

var output = d.getFullYear() + '/' + 
    ((''+month).length<2 ? '0' : '') + month + '/' + 
    ((''+day).length<2 ? '0' : '') + day; 


$('#clock').countdown(output).on('update.countdown', function (event) { 
    var $this = $(this).html(event.strftime('' + '<span>%-d</span> day%!d ' + '<span>%H</span> hr ' + '<span>%M</span> min ' + '<span>%S</span> sec')); 
});