javascript - PHP: making a countdown auto-updating -
i new php, new stackoverflow, , far it's been few months started learning php,
so point making countdown auto-refresh, have refresh page new result, there way make auto-updateable
i used following code achieve need:
<?php $date = strtotime("september 12, 2017 2:00 pm"); $remaining = $date - time(); $days_remaining = floor($remaining / 86400); $hours_remaining = floor(($remaining % 86400) / 3600); $min_remaining = floor(($remaining % 3600) / 60); $seconds_remaining = floor($remaining % 60); echo "there $days_remaining days , $hours_remaining hours left , $min_remaining minutes left , $seconds_remaining left"; ?> but.. have update page every time new result.
update:
what heck.. had use javascript. if want, use code works perfectly
<script> var end = new date('09/12/2017 10:1 am'); var _second = 1000; var _minute = _second * 60; var _hour = _minute * 60; var _day = _hour * 24; var timer; function showremaining() { var = new date(); var distance = end - now; if (distance < 0) { clearinterval(timer); document.getelementbyid('countdown').innerhtml = 'expired!'; return; } var days = math.floor(distance / _day); var hours = math.floor((distance % _day) / _hour); var minutes = math.floor((distance % _hour) / _minute); var seconds = math.floor((distance % _minute) / _second); document.getelementbyid('countdown').innerhtml = days + 'days '; document.getelementbyid('countdown').innerhtml += hours + 'hrs '; document.getelementbyid('countdown').innerhtml += minutes + 'mins '; document.getelementbyid('countdown').innerhtml += seconds + 'secs'; } timer = setinterval(showremaining, 1000); </script> <!doctype html> <head> </head> <body> <div id="countdown"> <h1 id="countdown"></h1> </div> </body>
here example of timer you, 1 contains methods , exposes few of methods external scope.
// setup countdown timer. const timer = (countdowntime, elementid, intervaltime = 1000, donemessage = 'expired.') => { // set internal datastore, not accessible outside method. let store = { end: new date(countdowntime).gettime(), current: null, interval: intervaltime, intervalid: null, element: document.getelementbyid(elementid), msg: donemessage, }; // format time , update attached element. const updatetime = () => { // current difference. let = store.end - store.current; // if current remaining greater 0 format timer. if (now > 0) { let d = math.floor(now / (1000 * 60 * 60 * 24)) , h = math.floor((now % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) , m = math.floor((now % (1000 * 60 * 60)) / (1000 * 60)) , s = math.floor((now % (1000 * 60)) / 1000); store.element.textcontent = `${d} days --- ${h} hours --- ${m} minutes --- ${s} seconds`; return; } // use expired message if not. store.element.textcontent = store.msg; }; // method interval using tick down time. const tick = () => { // current time. store.current = new date().gettime(); // stop timer interval if time negative. if (store.current < 0) { public.stop(); } updatetime(); } // these methods accessible outside timer function. let public = { // lets see datastore keys. get: key => (store.hasownproperty(key)) ? store[key] : false, // start interval. start: () => { store.intervalid = setinterval(tick, store.interval) }, // stop interval stop: () => clearinterval(store.intervalid), // clear , reset interval reset: () => { clearinterval(store.intervalid); store.interval = null; }, } // return public methods timer. return public; } // instantiate timer basic options. let countdown = timer('09/12/2017 10:1 am', 'countdown'); // start countdown. countdown.start();
Comments
Post a Comment