create a countdown timer which is the best solution?

Question

So i have read and doing some example of the countdown timer but i still didn't have a clear idea about how to create a count down timer. I want do a countdown timer which is countdown 7 days when the countdown end will echo a div with top post in this week. The div will stay there and the timer will be restart again with 7days and after 7 days will echo the new weekly top post. and again and again. before i was using js to do this with a simple timer but when refreshing broswer the timer will restart. And i know there have local storage but when user delete cookie the timer will restart again. i want it to be the same with every user. what should i do? does anyone can give me a clear idea or step to develop this?

currently i was thinking a way to do this is using sql to compare the starttime and endtime when reach to the endtime echo div and content and +7days to the end time and store the current time to start time and repeat it and repeat it <

i have do a simple php script with mysql and using jq to make the time running every second

here is my countdown.php << i cant using $today compare with $end which is select out from db so i was create it a new $ending to compare

<?php

include '../config.php';


date_default_timezone_set('Asia/Kuala_Lumpur');
$today = date("Y-m-d H:i:s");
$s="Select TIMESTAMP(start_date)as date_field from countdown_timer";
$e ="Select TIMESTAMP(end_date)as date_field from countdown_timer";
$start = mysqli_query($connection,$s)or die(mysqli_connect_errno($connection));
$end = mysqli_query($connection,$e)or die(mysqli_connect_errno($connection));
$ending = date("2016-06-01 23:05:40");

if ( $today == $end ){  
   echo "abc";
   $next_seven_date= date('Y-m-d H:i:s', strtotime($today. ' + 1 minute'));
   $end_add_time = mysqli_query($connection,"INSERT INTO countdown_timer (`end_date`) VALUES ('$next_seven_date') ");
}
 else {
     echo "$today";
}

this is my jq to make the timer running every second

$(document).ready(function(e){
$.ajaxSetup({cache:false});
setInterval(function(){$('#countdown').load('countdownTimer.php?');}, 1000); 
});

this is my html

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

I have a hard time with this hope there have a way to develop this

that is the content is empty i using ajax to append it on the div countdown once the end time is reach will echo content out from db but in this example i was echo "abc" making a example — Chew, Jun 01 '16 at 19:41

Rahul Arora · Answer 1 · 2016-06-01T19:46:49.297

You can get the date stamp from the backend once as per your requirements and do this:

Just explaining the logic you can use, you can modify the code as per your requirements.

var a = new Date("2016-06-01 23:05:40"); // date in this format will go here to create date object at frontend
var b;

function timer(){

    a.setSeconds(a.getSeconds()-1);

    b = a.toLocaleTimeString(); //converting to hours: min: sec: meridian

    document.getElementById("countdown").innerHTML = b;

}

setInterval(timer,1000);

score 1 · Accepted Answer · answered Jun 01 '16 at 20:44

Here's a decent strategy you could do.

Determine what day of the week you want your count down to end on.
Have the frontend do all the counting.
Determine from the frontend when the countdown is over.
Make an ajax request to retrieve whatever the top post is.
Make the backend send back whatever top post is suppose to show up at that point in time. (Use the dates from the backend to do this, can't trust the frontend!)

Since you want this event to happen at the same time for every user, you don't need persistent frontend storage (i.e. localStorage), you could just start counting down from whenever the user accesses the page. Piggybacking on the fact that you are already using jQuery and keeping in mind the many caveats of making an accurate frontend timer, I would strongly recommend you use a jQuery plugin like "countdown". For your use case it would be something like this...

function nextDay(x) { 
    // explanation of this function: http://stackoverflow.com/a/1579109/1666547
    var now = new Date();    
    now.setDate(now.getDate() + (x+(7-now.getDay())) % 7);
    return now;
}

function retrieveCurrentTopPost() {
    // MAKE AJAX CALL HERE TO RETRIEVE THE CURRENT TOP POST
}

retrieveCurrentTopPost()

var opts = {
    date: nextDay(0), // argument can be 0-6, 0 is next Sunday
    onEnd: function () {
        retrieveCurrentTopPost()
        this.restart(opts) // restart the counter
    }
}

$('#timer').countdown(opts);

Final notes:

I'm merely providing a strategy, not a working implementation.
This code is totally untested, and all I know about this plugin is based on a quick skim of its docs.
Sorry for not providing a backend example, but it should be straight forward — just serve the top post for the date specified on the server.
You might need to adjust the frontend timezone to match the backend.
If using this plugin, you could adjust the look of your countdown clock purely with css or intercept the output with the render method provided.

@Chew Awesome! Please mark this answer as correct (click the checkmark on the left hand side), if it took care of your needs. — m-a-r-c-e-l-i-n-o, Jun 02 '16 at 14:20

create a countdown timer which is the best solution?

2 Answers2