Search code examples
javascriptcountdown

refresh page and restart countdown when reach 00:00:00 every 8 hours


I have wordpress website and I put in countdown script and working and I want to customize this script and wondering about many points:

1-is possible to make the countdown for every 8 hours? For example, when the countdown reached zero (00-00-00), it will refresh page and automatically start over again 08-00-00 .

2-how can I do to keep the countdown constant? I mean, everytime I load the page is still in the start time, There isn't a way to keep the countdown even when you close the tab?

here is my js code

jQuery(document).ready(function($) {
    $('.countdown').final_countdown({
        start: '1362139200',
        end: '1388461320',
        now: '1387461319',
selectors: {
    value_seconds: '.clock-seconds .val',
    canvas_seconds: 'canvas-seconds',
    value_minutes: '.clock-minutes .val',
    canvas_minutes: 'canvas-minutes',
    value_hours: '.clock-hours .val',
    canvas_hours: 'canvas-hours',
    value_days: '.clock-days .val',
    canvas_days: 'canvas-days'
},
seconds: {
    borderColor: '#7995D5',
    borderWidth: '6'
},
minutes: {
    borderColor: '#ACC742',
    borderWidth: '6'
},
hours: {
    borderColor: '#ECEFCB',
    borderWidth: '6'
},
days: {
    borderColor: '#FF9900',
    borderWidth: '6'
}}, function() {
// Finish callback
});
});

I am waiting for your help answers. When you answer my question please copy my code and edit your answer there.


Solution

  • If you want the same countdown for all the users, you need to use an external source, like a file or a database to denote the starting time (unless you want to "anchor" or hard-code the starting time to a specific global moment in time, like I did in the example below). If you want individual countdowns for all users, you can use browser storage engines like local storage (local storage is probably the easiest/quickest way, but you can use cookies, websql, etc...).

    And to achieve repetition after each 8 hours, a simple math modulus operator would do - you just denote the starting time and from there you show the modulus (remainder of total time divided by 8 hours).

    An example:

    var t = document.getElementById('t');
    
    setInterval(function(){
      t.textContent = (new Date().getTime() / 1000 | 0) % 15;
    }, 1000);
    Repeating every 15 seconds (you need 8 hours instead)
    <p id="t"></p>