简体   繁体   中英

Javascript countdown timer can't set half past hour

I'm trying to use a countdown timer to count to a certain time everyday (monday to friday). So far everything works, except it can only be set to count to a certain hour (based on the 24 hour clock) without a half hour included. So for example, if I wanted to count to 4PM, I'd set var target = 16; but if I wanted 4:30 and I tried to set var target = 1630; it doesn't work. Unfortunately I don't have much experience with javascript, but I believe the problem is either with the way it's evaluating the target time using the getHours function but not sure where to take it from there.

if (document.getElementById('countdownTimer')) {
    pad = function(n, len) { // leading 0's
        var s = n.toString();
        return (new Array( (len - s.length + 1) ).join('0')) + s;
    };
    function countDown() {
        var now = new Date();
        if ( (now.getDay() >= 1) && (now.getDay() <= 5) ) { // Monday to Friday only
            var target = 15; // 15:00hrs is the cut-off point
            if (now.getHours() < target) { // don't do anything if we're past the cut-off point
                var hrs = (target - 1) - now.getHours();
                if (hrs < 0) hrs = 0;
                var mins = 59 - now.getMinutes();
                if (mins < 0) mins = 0;
                var secs = 59 - now.getSeconds();
                if (secs < 0) secs = 0;
                var str = pad(hrs, 2) + ':' + pad(mins, 2) + '.<small>' + pad(secs, 2) + '</small>';
                document.getElementById('countdownTimer').innerHTML = str;
            }
        }
    }
    var timerRunning = setInterval('countDown()', 1000);
}

If you're ok with considering another method, the following javascript will count down (in seconds) to any date in the future (and count up after the date has passed).

// new Date(year, month, day, hours, minutes, seconds, milliseconds)
var target = new Date(2014, 0, 30, 12, 30, 0, 0)

function countdown(id, targetDate){
    var today = new Date()
    targetDate.setDate(today.getDate())
    targetDate.setFullYear(today.getFullYear())
    targetDate.setMonth(today.getMonth())
    var diffMillis = targetDate - today
    if (diffMillis >= 0){
        document.getElementById(id).innerHTML = millisToString(diffMillis)
    }
}

setInterval(function(){countdown('seconds', target)},1000)

It uses the javascript date object, so you can literally use any date.

Updated example to do:

  • format the countdown using hours:minutes:seconds etc
  • stop the timer after the date is reached

Updated: updated code to override the targetDate to today's date.

Example: http://jsfiddle.net/kKx7h/5/

对于4:30PM ,请尝试var target = 16.5而不是var target = 1630;

You now need to add another variable for the minutes. We can have target as an object literal rather than declare two variables for time:

 var target={hour: 15, minute:30};

if ( (now.getHours() < target.hour) && () now.getMinutes() < target.minute ){ 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM