javascript - create a countdown timer which is the best solution? -

so have read , doing example of countdown timer still didn't have clear idea how create count down timer. want countdown timer countdown 7 days when countdown end echo div top post in week. div stay there , timer restart again 7days , after 7 days echo new weekly top post. , again , again. before using js simple timer when refreshing broswer timer restart. , know there have local storage when user delete cookie timer restart again. want same every user. should do? can give me clear idea or step develop this?

currently thinking way using sql compare starttime , endtime when reach endtime echo div , content , +7days end time , store current time start time , repeat , repeat <

i have simple php script mysql , using jq make time running every second

here countdown.php << cant using $today compare $end select out db create new $ending 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 countdown_timer"; $e ="select timestamp(end_date)as date_field 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 countdown_timer (`end_date`) values ('$next_seven_date') "); }  else {      echo "$today"; } 

this jq make timer running every second

$(document).ready(function(e){ $.ajaxsetup({cache:false}); setinterval(function(){$('#countdown').load('countdowntimer.php?');}, 1000);  }); 

this html

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

i have hard time hope there have way develop

here's decent strategy do.

• determine day of week want count down end on.
• have frontend counting.
• determine frontend when countdown over.
• make ajax request retrieve whatever top post is.
• make backend send whatever top post suppose show @ point in time. (use dates backend this, can't trust frontend!)

since want event happen @ same time every user, don't need persistent frontend storage (i.e. localstorage), start counting down whenever user accesses page. piggybacking on fact using jquery , keeping in mind many caveats of making accurate frontend timer, recommend use jquery plugin "countdown". use case this...

function nextday(x) {      // explanation of function: http://stackoverflow.com/a/1579109/1666547     var = new date();         now.setdate(now.getdate() + (x+(7-now.getday())) % 7);     return now; }  function retrievecurrenttoppost() {     // make ajax call here retrieve current top post }  retrievecurrenttoppost()  var opts = {     date: nextday(0), // argument can 0-6, 0 next sunday     onend: function () {         retrievecurrenttoppost()         this.restart(opts) // restart counter     } }  $('#timer').countdown(opts); 

final notes:

• i'm merely providing strategy, not working implementation.
• this code totally untested, , know plugin based on quick skim of docs.
• sorry not providing backend example, should straight forward — serve top post date specified on server.
• you might need adjust frontend timezone match backend.
• if using plugin, adjust of countdown clock purely css or intercept output render method provided.