1

I want to make this JavaScript countdown timer show 01 instead of 1 and 00 when there's nothing in that part. I'm basically just trying to make it look like a digital clock, but it looks weird when theres no 0 making it squeeze in.

heres the script I found: 

// JavaScript Document

CountDownTimer('03/25/2013 9:0 AM', 'countdownSpring');
CountDownTimer('06/10/2013 9:0 AM', 'countdownSummer');
CountDownTimer('11/27/2013 9:0 AM', 'countdownFall');
CountDownTimer('12/23/2013 9:0 AM', 'countdownWinter');

function CountDownTimer(dt, id)
{
    var end = new Date(dt);

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);
            document.getElementById(id).innerHTML = 'CAMP IS HERE!';

            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        document.getElementById(id).innerHTML = days + ':';
        document.getElementById(id).innerHTML += hours + ':';
        document.getElementById(id).innerHTML += minutes + ':';
        document.getElementById(id).innerHTML += seconds;
    }

    timer = setInterval(showRemaining, 1000);
}
4

4 に答える 4

0

Javascript ソースへのいくつかの変更 (jquery を使用して変更しました)

            var cdTimer;
        function CountDownTimer(dt, elementID)
        {
            var end = new Date(dt);

            var _second = 1000;
            var _minute = _second * 60;
            var _hour = _minute * 60;
            var _day = _hour * 24;

            cdTimer = setInterval(function() { showRemaining(end, _second, _minute, _hour, _day, elementID) }, 1000);
        }   
        function showRemaining(end, _second, _minute, _hour, _day, elementID) 
        {
            var $updateElement = $('#' + elementID);
            var now = new Date();
            var distance = end - now;
            if (distance < 0) 
            {

                clearInterval(cdTimer);
                $updateElement.html('CAMP IS HERE!');

                return;
            }
            var days = Math.floor(distance / _day);
            var hours = Math.floor((distance % _day) / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);

            $updateElement.html( days + ' ' + Right('00' + hours, 2) + ':' + Right('00' + minutes, 2) + ':' + Right('00' + seconds, 2) );
        }
        function Right(str, n)
        {
            if (n <= 0)
            {
                return "";
            }
            else if (n > String(str).length)
            {
                return str;
            }
            else 
            {
                var iLen = String(str).length;
                return String(str).substring(iLen, iLen - n);
            }
        }           
        $(document).ready(function() {
            CountDownTimer('03/25/2013 9:0 AM', 'countdownSpring');
            CountDownTimer('06/10/2013 9:0 AM', 'countdownSummer');
            CountDownTimer('11/27/2013 9:0 AM', 'countdownFall');
            CountDownTimer('12/23/2013 9:0 AM', 'countdownWinter');
        });
于 2013-03-11T22:34:31.103 に答える
0

ページに値を追加する前にいつでも値をテストし、それに応じて変更を加えることができます。

var daysString;
if (days == 0) { daysString = "00"; }
else if (days < 10) { daysString = "0" + days; }
else { daysString = "" + days; } 
document.getElementById(id).innerHTML = daysString + ':';
于 2013-03-11T22:10:54.950 に答える
0

これを行う 1 つの方法は、次のような番号拡張を作成することです。

Number.prototype.useLeadingZero = function () {
    return (this < 10 ? "0" : "") + this;
};

次に、次のように使用できます。

document.getElementById(id).innerHTML = days.useLeadingZero() + ':' +
                                        hours.useLeadingZero() + ':' +
                                        minutes.useLeadingZero() + ':' +
                                        seconds.useLeadingZero();

ワーキングデモ

于 2013-03-11T22:14:00.903 に答える