如何让JavaScript和JQuery在天数中显示3位数字

Question

我试图在互联网上运行这段代码，我需要一点帮助，代码显示倒计时，但目前代码只显示“2”个日期字段框。无论如何修改此代码以显示天字段的“3”框？

jQuery Countdown.js

(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(
                '<span class="position">\
                    <span class="digit static">0</span>\
                </span>\
                <span class="position">\
                    <span class="digit static">0</span>\
                </span>'
            ).appendTo(elem);

            if(this!="Seconds"){
                elem.append('<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:'-2.1em',
                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:'2.5em',opacity:0},'fast',function(){
                digit.remove();
            })

        replacement
            .delay(100)
            .animate({top:0,opacity:1},'fast',function(){
                replacement.addClass('static');
            });
    }
})(jQuery);

倒计时风格。css

    .countdownHolder{
    width:450px;
    margin:0 auto;
    font: 40px/1.5 'Open Sans Condensed',sans-serif;
    text-align:center;
    letter-spacing:-3px;
}

.position{
    display: inline-block;
    height: 1.6em;
    overflow: hidden;
    position: relative;
    width: 1.05em;
}

.digit{
    position:absolute;
    display:block;
    width:1em;
    background-color:#444;
    border-radius:0.2em;
    text-align:center;
    color:#fff;
    letter-spacing:-1px;
}

.digit.static{
    box-shadow:1px 1px 1px rgba(4, 4, 4, 0.35);

    background-image: linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
    background-image: -o-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
    background-image: -moz-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
    background-image: -webkit-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
    background-image: -ms-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.5, #3A3A3A),
        color-stop(0.5, #444444)
    );
}

/**
 * You can use these classes to hide parts
 * of the countdown that you don't need.
 */

.countDays{}
.countDiv0{}
.countHours{}
.countDiv1{}
.countMinutes{}
.countDiv2{}
.countSeconds{}


.countDiv{
    display:inline-block;
    width:16px;
    height:1.6em;
    position:relative;
}

.countDiv:before,
.countDiv:after{
    position:absolute;
    width:5px;
    height:5px;
    background-color:#444;
    border-radius:50%;
    left:50%;
    margin-left:-3px;
    top:0.5em;
    box-shadow:1px 1px 1px rgba(4, 4, 4, 0.5);
    content:'';
}

.countDiv:after{
    top:0.9em;
}

script.js

$(function(){

    var note = $('#note'),
        ts = new Date(2016, 11, 27, 23, 59, 59),
        newYear = true;

    if((new Date()) > ts){
        // The new year is here! Count towards something else.
        // Notice the *1000 at the end - time must be in milliseconds
        ts = (new Date()).getTime() + 10*24*60*60*1000;
        newYear = false;
    }

    $('#countdown').countdown({
        timestamp   : ts,
        callback    : function(days, hours, minutes, seconds){

            var message = "";

            message += days + " day" + ( days==1 ? '':'s' ) + ", ";
            message += hours + " hour" + ( hours==1 ? '':'s' ) + ", ";
            message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and ";
            message += seconds + " second" + ( seconds==1 ? '':'s' ) + " <br />";

            if(newYear){
                message += "left until the new year!";
            }
            else {
                message += "left to 10 days from now!";
            }

            note.html(message);
        }
    });

});

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CountDown</title>

        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" />
        <link rel="stylesheet" href="assets/css/styles.css" />
        <link rel="stylesheet" href="assets/countdown/jquery.countdown.css" />
    </head>

    <body>

        <div id="countdown"></div>

        <p id="note"></p>

        <!-- JavaScript includes -->
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="assets/countdown/jquery.countdown.js"></script>
        <script src="assets/js/script.js"></script>
    </body>
</html>

不确定这是否可行，欢迎任何意见。

Answer 1

是的！这是可行的。这是一个有效的 codepen，但让我也解释一下我做了什么。

首先我去了生成HTML的地方。它循环遍历不同数值的数组，并为每个数值添加 2 个字段。我从循环中抽出几天，并给了它 3 个字段：

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

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

然后我去了更新数字的地方。它正在做一些简单的除法，并为每个计数使用 updateDuo 方法。所以我做了一个 updateTrio 方法来更新我的 3 个字段

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

function updateDuo(minor,major,value){
        switchDigit(positions.eq(minor),Math.floor(value/10)%10);
        switchDigit(positions.eq(major),value%10);
    }

  function updateTrio(minor, middle, major,value){
        switchDigit(positions.eq(minor),Math.floor(value/100)%10);
        switchDigit(positions.eq(middle),Math.floor(value/10)%10);
        switchDigit(positions.eq(major),value%10);
    }

不幸的是，此解决方案将始终显示 3 个数字。但据我计算，你有大约 400 天的时间来解决这个问题:)

Answer 2

我想你想要的是 'Julien Date.' 下面的代码将为你 return 朱利安日期。可以将您的日期字符串传递给此代码，它会为您将其转换为 julien。

Date.prototype.julianDate = function () {
    var j = parseInt((this.getTime() - new Date('Dec 30,' + (this.getFullYear() - 1) + ' 23:00:00').getTime()) / 86400000).toString(),
    i = 3 - j.length;
    while (i-- > 0) j = 0 + j;
    return j
};

alert(new Date().julianDate());

信用：http://www.webdeveloper.com/forum/showthread.php?84211-JavaScript-and-Julian-Date

朱利安日历：http://landweb.nascom.nasa.gov/browse/calendar.html

如何让JavaScript和JQuery在天数中显示3位数字

How to get JavaScript and JQuery to display 3 digits in the days

javascript

jquery

countdown