jquery - 将倒计时设置为特定日期

标签 jquery html css

我已经创建了一个 jquery 计数器,但我无法将它设置为我的特定日期。我希望它设置为 16/12/2013。我到底做错了什么?当我运行这段代码时,它给了我错误的天数。

脚本

$(function(){

$('#counter').countdown({             
    timestamp   : new Date(2013,12,16)

});
});

倒计时j查询

    (function($){

// Number of seconds in every time division
var days    = 24*60*60,
    hours   = 60*60,
    minutes = 60;

// Creating the plugin
$.fn.countdown = function(prop){

    var options = $.extend({
        callback    : function(){},
        timestamp   : 0
    },prop);

    var left, d, h, m, s, positions;

    // Initialize the plugin
    init(this, options);

    positions = this.find('.position');

    (function tick(){

        // Time left
        left = Math.floor((options.timestamp - (new Date())) / 1000);

        if(left < 0){
            left = 0;
        }

        // Number of days left
        d = Math.floor(left / days);
        updateDuo(0, 1, d);
        left -= d*days;

        // Number of hours left
        h = Math.floor(left / hours);
        updateDuo(2, 3, h);
        left -= h*hours;

        // Number of minutes left
        m = Math.floor(left / minutes);
        updateDuo(4, 5, m);
        left -= m*minutes;

        // Number of seconds left
        s = left;
        updateDuo(6, 7, s);

        // Calling an optional user supplied callback
        options.callback(d, h, m, s);

        // Scheduling another call of this function in 1s
        setTimeout(tick, 1000);
    })();

    // This function updates two digit positions at once
    function updateDuo(minor,major,value){
        switchDigit(positions.eq(minor),Math.floor(value/10)%10);
        switchDigit(positions.eq(major),value%10);
    }

    return this;
};


function init(elem, options){
    elem.addClass('countdownHolder');

    // Creating the markup inside the container
    $.each(['Days','Hours','Minutes','Seconds'],function(i){
        $('<span class="count'+this+'">').html(
            '<div>\
            <p class="position">\
                <span class="digit static">0</span>\
            </p>\
            </div>\
            <div>\
            <p class="position">\
                <span class="digit static">0</span>\
            </p>\
            </div>'
        ).appendTo(elem);

        if(this!="Seconds"){
            elem.append('<p>:</p><span class="countDiv countDiv'+i+'"></span>');
        }
    });

}

// Creates an animated transition between the two numbers
function switchDigit(position,number){

    var digit = position.find('.digit')

    if(digit.is(':animated')){
        return false;
    }

    if(position.data('digit') == number){
        // We are already showing this number
        return false;
    }

    position.data('digit', number);

    var replacement = $('<span>',{
        'class':'digit',
        css:{
            top:0,
            opacity:0
        },
        html:number
    });

    // The .static class is added when the animation
    // completes. This makes it run smoother.

    digit
        .before(replacement)
        .removeClass('static')
        .animate({top:0,opacity:0},'fast',function(){
            digit.remove();
        })

最佳答案

您的月份不存在。月份是 0-11 索引。试试 timeStamp: new Date(2013, 11, 16);。 参见 http://www.w3schools.com/js/js_obj_date.asp了解更多详情。

关于jquery - 将倒计时设置为特定日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17710460/

相关文章:

jquery - 如何使用带有字符串以外参数的 jQuery 来使用 WebMethod?

jquery - 使带有淡入淡出元素的 div block 消失并在设定时间后重新出现

javascript - 在 anchor 链接到另一个页面并显示 div

javascript - 我正在尝试在 javascript 中验证没有警报功能的文本字段,但它不起作用

html - 需要一行中的文本,溢出隐藏在 LI 元素中

html - 使用 CSS 创建 Angular 形状

jquery - 调整框大小时调整左侧 div 框的大小

javascript - 实时表编辑其他 mySQL 表中的显示字段

javascript - 当它得到位置固定时缩小 tr 宽度

javascript - 最后插入的元素闪烁颜色