js结合拍php建立倒计时功能（一个页面一个或者多个）_php一个页面调用多个时间倒计时-CSDN博客

本文链接：https://blog.csdn.net/zhxlzhh/article/details/53440261

js结合拍php建立倒计时功能（一个页面一个或者多个）

今天在工作中用到了倒计时的功能，现在准备写出来，供以后使用

第一、一个页面就只有一个倒计时的情况

<?php        

//php的时间是以秒算。js的时间以毫秒算        

date_default_timezone_set("Asia/Hong_Kong");//地区        

//配置每天的活动时间段        
$starttimestr = "09:00:00";        
$endtimestr = "13:50:00";        

$starttime =  strtotime($starttimestr);        
$endtime  =   strtotime($endtimestr);        
$nowtime  =   time();        
if ($nowtime<$starttime){        
die("活动还没开始,活动时间是：{$starttimestr}至{$endtimestr}");        
}        
$lefttime = $endtime-$nowtime;  //实际剩下的时间（秒）        
?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">        
<html xmlns="http://www.w3.org/1999/xhtml">        
<head>        
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        
<title>PHP实时倒计时!</title>        
<script language="JavaScript">        
<!-- //        
var runtimes = 0;        
function GetRTime(){        
var nMS = <?=$lefttime?>*1000-runtimes*1000;        
var nH=Math.floor(nMS/(1000*60*60))%24;        
var nM=Math.floor(nMS/(1000*60)) % 60;        
var nS=Math.floor(nMS/1000) % 60;        
document.getElementById("RemainH").innerHTML=nH;        
document.getElementById("RemainM").innerHTML=nM;        
document.getElementById("RemainS").innerHTML=nS;        
if(nMS>5*59*1000&&nMS<=5*60*1000)        
{        
  alert("还有最后五分钟！");        
}        
runtimes++;        
setTimeout("GetRTime()",1000);        
}        
window.onload=GetRTime;        
// -->        
</script>        
</head>        
<body>        
  <h1><strong id="RemainH">XX</strong>:<strong id="RemainM">XX</strong>:<strong id="RemainS">XX</strong></h1>        
</body>        
</html>

第二种情况、一个页面要求多个倒计时功能，例如商城中活动倒计时，上面这样的代码是会起冲突的

<script>
$(function(){
updateEndTime();
});
function updateEndTime()
{
 var date = new Date();
 var time = date.getTime();

 $(".settime").each(function(i){

 var endTime =this.getAttribute("endTime"); 
 if(endTime == ""){
    newendTime = time + parseInt((Math.random()*(72-24)+24)*1000*60*60*24);
    this.setAttribute("endTime",newendTime);
 }
 var lag = (endTime - time) / 1000; 
  if(lag > 0)
  {
   var second = Math.floor(lag % 60);     
   var minite = Math.floor((lag / 60) % 60);
   var hour = Math.floor((lag / 3600) % 24);
   var day = Math.floor((lag / 3600) / 24);
   $(this).html(day+"天"+hour+"小时"+minite+"分"+second+"秒");
  }
  else{
        newendTime = time + parseInt((Math.random()*(72-24)+24)*1000*60*60*24);
        this.setAttribute("endTime",newendTime);
   }
 });
 setTimeout("updateEndTime()",1000);
}
</script>

 //调用方法
<body>
<div class="settime" endTime=""></div>
<div class="settime" endTime=""></div>

这样很简单了，只要在需要倒计时的地方调用就行了，和php也很好的结合起来，好吧，今天先写这么多，以后再补充