Question

我想在我的某个网站上添加“每日倒计时时钟”，以获取其中一项促销优惠。

基本上我希望时钟在每晚午夜重置，所以在午夜它会说“0天，24小时，0分钟，0秒”。

我有一个特定日期倒计时的代码，你可以在这里看到： -

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

只是想知道如何实现这一目标，以便在每天的午夜自动重置。

EDIT ::

我正在尝试如下： -

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的例子：

Examples

更新了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'));
 });

每日倒计时时钟

2 个答案: