jquery - JavaScript Countdown Timer to specific time everyday - Stack Overflow

admin管理员组

文章数量:1350946

I am currently developing a website with a countdown timer at the headline: /

The current timer is just 12hrs + few mins.. What I would like is the countdown timer will show the time remaining until 11PM on the Time Zone of the current visitor. Is that possible? Thanks!

Here is the JavaScript:



function startTimer(duration, display) {
    var timer = duration, hours, minutes, seconds;
        setInterval(function () {



        hours = parseInt(((timer / 60) / 60 ) % 60, 10);



        minutes = parseInt((timer / 60)%60, 10);
        seconds = parseInt(timer % 60, 10);

        hours = hours < 10 ? "0" + hours : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = hours + ":" + minutes + ":" + seconds;



        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var onehour = 60 * 600 * 1.231,
        display = document.querySelector('#time');
    startTimer(onehour, display);
};

Here is the HTML:

<span id=time></span>

EDIT: If the visitor's current time is for example 11:40pm, It should display 23hrs & 20mins left..

I am currently developing a website with a countdown timer at the headline: http://iphone.myhandykey./

The current timer is just 12hrs + few mins.. What I would like is the countdown timer will show the time remaining until 11PM on the Time Zone of the current visitor. Is that possible? Thanks!

Here is the JavaScript:



function startTimer(duration, display) {
    var timer = duration, hours, minutes, seconds;
        setInterval(function () {



        hours = parseInt(((timer / 60) / 60 ) % 60, 10);



        minutes = parseInt((timer / 60)%60, 10);
        seconds = parseInt(timer % 60, 10);

        hours = hours < 10 ? "0" + hours : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = hours + ":" + minutes + ":" + seconds;



        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var onehour = 60 * 600 * 1.231,
        display = document.querySelector('#time');
    startTimer(onehour, display);
};

Here is the HTML:

<span id=time></span>

EDIT: If the visitor's current time is for example 11:40pm, It should display 23hrs & 20mins left..

• javascript
• jquery

Share Improve this question Follow edited May 21, 2016 at 3:51 user329072 asked May 21, 2016 at 2:32 user329072user329072 5311 gold badge11 silver badge44 bronze badges 4

• Please share your code and try to locate the problem to your best. Then the munity can do the rest. – Alex Kudryashev Commented May 21, 2016 at 2:38
• Thank you Alex. I have added the script. – user329072 Commented May 21, 2016 at 2:52
• What if the user visits the page and it's already say 11:19PM local time? Display a negative clock or give them 24:41:00 to decide? – smcd Commented May 21, 2016 at 3:41
• If the visitor's current time is for example 11:19pm, It should display 23hrs & 41mins left.. – user329072 Commented May 21, 2016 at 3:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

(function() {
  var start = new Date;
  start.setHours(23, 0, 0); // 11pm

  function pad(num) {
    return ("0" + parseInt(num)).substr(-2);
  }

  function tick() {
    var now = new Date;
    if (now > start) { // too late, go to tomorrow
      start.setDate(start.getDate() + 1);
    }
    var remain = ((start - now) / 1000);
    var hh = pad((remain / 60 / 60) % 60);
    var mm = pad((remain / 60) % 60);
    var ss = pad(remain % 60);
    document.getElementById('time').innerHTML =
      hh + ":" + mm + ":" + ss;
    setTimeout(tick, 1000);
  }

  document.addEventListener('DOMContentLoaded', tick);
})();

Only <span id='time'></span> left!

Something like this:

    $(document).ready(function () {
        var mg = new Date(2016, 5, 21, 0, 0, 0, 0);
        var tmr = window.setInterval(function () {
            var d = new Date();
            var dif = mg - d;
            var s = parseInt(dif / 1000);
if (s < 0) {
    document.getElementById('spCnt').innerHTML = 'Event starts';
    window.clearInterval(tmr);
    return;
}
            var sec = s % 60;
            var m = parseInt(s / 60);
            var min = m % 60;
            var h = parseInt(m / 60);
            var hour = h % 24;
            d = parseInt(h / 24);

            document.getElementById('spCnt').innerHTML = d + ' days ' + hour + ' hours ' + min + ' min and ' + sec + ' sec remaining';
        }, 1000);
    });

本文标签： jqueryJavaScript Countdown Timer to specific time everydayStack Overflow