Real-time display of Countdown status demo (with detailed notes)

This program contains a number of documents to explain, of course, you can also be combined according to the actual situation.

Index.html (not required): Home display, time settings, testing can be directly in the file to specify the time.

gettime.php (main file 1): Real-time countdown status display

gettime2.php (main file 2): GetTime requests a file every 1 seconds to return the data requested at the moment

The source code is as follows:

/** index.html **/<!--  The following JS code is a simple script for input time detection, so do not--><form action= "gettime.php"  method= "POST" > Please enter the activity start time: <input id= "Hour"  type= "text"  name= "Hour"  size= "2"  /> point <input id= "min"  type= "text"  name= "Min"  size= "2"  /> min <input  Id= "SEC"  type= "text"  name= "SEC"  size= "2"  /> sec <input type= "Submit"  value= "settings " /></form><script type=" Text/javascript ">window.onload=function () {Var hour  = document.getelementbyid (' hour '); Hour.onblur=function () {if (hour.value>23| | hour.value<0) {alert (' Time Out of Range '); return false;}} Var min = document.getelementbyid (' min '); Min.onblur=function () {if (min.value>59| | min.value<0) {alert (' Time Out of Range '); return false;}} Var sec = document.getelementbyid (' sec '); Sec.onblur=function () {if (sec.value>59| | sec.value<0) {alert (' Time Out of Range '); return false;}}} </script>/** gettime.php **/<?phpecho  "Set time is:". $hour. ":" $min. ":". $sec. ", activity has not started, countdown status <br />" ;}? >/** ajax the requested data will be stored in id= ' hh ' in this div, you can also put the returned data in any position you want to put, just need to set its ID to the same as the JS ID. Note that this script requires jquery support (download JQ at the end of the article), so please refer to the JQ file in place. **/<div id= "hh" ></div><script type= "Text/javascript"  src= "Jquery-2.1.1.min.js" ></script><script type= "Text/javascript" >function gett () {$ (function () {         //receives index passed time parameter, and uses Ajax to pass to gettime2.php to judge          //test can not need index, directly here to specify the time var h= ' <?php echo  $hour;? > '; var m= ' <?php echo  $min;? > '; var s= ' <?php echo  $sec;? > '; $.ajax ({url: ' gettime2.php?h= ' +h+ ' &m= ' +m+ ' &s= ' +s,type: "POST", Data:{action: "Guesslike"},datatype: " HTML ", Timeout:3000,cache:false,success:function (RE) {$ (' #hh '). HTML (re);}})}); SetTimeout ("Gett ()", +)  }gett (); </script>/* gettime2.php  Core file  */<?phpdate_default_timezone_set ("PRC");//Receive Time $seth=$_request[' H ']; $seti =$_request[ ' m ']; $sets =$_request[' s ']; $time =time ();//echo  ' <br /> current time is: '. Date ("H:i:s" &NBSP;, $time);// Determine the hours remaining >1if ($seth >date (' h ', $time)) {$h = $seth-date (' h ', $time);//Determine minutes remaining >1if ($seti >date (' i ', $time)) {$i = $seti-date (' i ', $time);//Determine seconds remaining >1if ($sets >date (' s ', $time)) {$s = $sets-date (' s ', $time);} else{$s = $sets-date (' s ', $time) +59; $i = $i-1;}} else{ //minutes remaining 0$i= $seti-date (' i ', $time) +59; $h = ($h-1) >0? ( $h-1): 0; //If the hour is borrowed 1 equals 0, then the hour is not displayed if ($sets >date (' s ', $time)) {$s = $sets-date (' s ', $time);} else{$s = $sets-date (' s ', $time) +59;}} if ($h!=0) {echo  "<br /> remaining time: $h." Hours ". $i." ". $s." Seconds ";} else{echo  "<br /> remaining time:". $i. " ". $s." Seconds ";}} else{//Judge hours remaining =0$h=0;if ($seti >date (' i ', $time)) {$i = $seti-date (' i ', $time);//Determine seconds remaining >1if ($sets >date (' s ', $ Time) {$s = $sets-date (' s ', $time);} else{$s = $sets-date (' s ', $time) +59; $i = $i-1;} echo  "<br /> remaining time:". $i. " Score of. $s. " Seconds ";} else{ //minutes remaining 0if ($sets <=date (' s ', $time)) {echo  "activity has begun";} else{//  $i =0; //minute is 0, can display, also can not display, this program does not show $s= $sets-date (' s ', $time);} if ($s >=0) {echo  "<br /> remaining time: $s." Seconds ";} Else return false;}}? >######################### #END ################################

The above 3 sections of the source code, copy the past, file name corresponding, open index can see the effect.

Official source jQuery2.1.1 Point This download, you can also Baidu download or official website to download.

This article is from a "sense of direction" blog, be sure to keep this source http://itech.blog.51cto.com/192113/1583215

Real-time display of Countdown status demo (with detailed notes)