关于php+js实现倒计时效果

最近项目需要实现一个倒计时的效果，大概需求就是一个新产品上架，可以添加为试用产品，对添加为试用产品的产品有一个时间要求（比如试用为三天），过了这个时间段，试用就结束了。
   
    
    
    
  
 
后台+前台实现，思路如下：
1. 后台使用PHP获取到活动开始时间戳和活动结束时间戳
2. 结束时间戳 - 开始时间戳 = 活动时间内的时间戳
3. 使用结束时间戳  - 当前时间时间戳，判断活动剩余时间！
操作方式有：
1 通过使用PHP 的 DateTime()对象
2.使用strtotime()进行转换实现
实现方式：
首先使用第一种： DateTime()对象（这个默认获取到的和time() 一样是当前时间戳）
使用到的方法有：
diff()；       获取开始和结束时间的时间差，返回的是一个转换后的数组
format();    对时间进行格式的转换
printf();       最后输入格式化后的时间样式

<?php 

	$presentTime   = new DateTime();
 	$endTime       = new DateTime("2017-06-04");
        $activityTime  = $presentTime->diff($endTime);
        $resultTime    = $activityTime->format("%d天%H时%i分%s秒");
	
     echo "PHP实现剩余时间：" . $resultTime;

效果如下：

使用printf()格式化输出：

<?php

	$activityTime  = $presentTime->diff($endTime);

	list($d, $h, $i, $s) = explode(" ", $timeDiff->format("%d %H %i %s"));

printf("剩余时间还有：%d天%h时%i分&s秒", $d, $h, $i, $s);

效果如下：

以上是使用DateTime()对象进行的格式化输出时间格式，也可以调用DateTime()对象的getTimestamp()方法获取时间戳进行输出:

$remainTime = $presentTime->getTimestamp() - $endTime->getTimestamp(); //获取到的是相减后的时间戳，同time()效果一样。

这是后台获取和显示了活动的实际时间，接下来需要在前台实现：

思路：

1. 将在后台获取的活动时间戳传入到前台（可以使用smatry或者twig模板引擎，也可以使用框架自带的模板引擎）。

2. 在前台将获取到的时间戳进行转换（转换成毫秒进行计算， *1000）；

3. 然后进行相除和求余计算： ( 活动时间戳(毫秒值) / (1000*60*60*24) ) % 365 = 剩下的实际天数，然后使用Math.floor()对天数进行向下取整。Math.floor(( 活动时间戳(毫秒值) / (1000*60*60*24) ) % 365 = 剩下的实际天数);

整体如下：

Math.floor(( 活动时间戳(毫秒值) / (1000*60*60*24) ) % 365 = 剩下的实际天数);

Math.floor( ( 活动时间戳(毫秒值) / (1000*60*60) ) % 24 = 剩下的实际小时);

Math.floor( ( 活动时间戳(毫秒值) / (1000*60) ) % 60 = 剩下的实际分钟);

Math.floor( ( 活动时间戳(毫秒值) / 1000）% 60 = 剩下的实际秒数);

提示：总的时间戳是从后台传递过来的（时间是和计算机上的时间同步的）然后转换成毫秒值和前台进行计算，所以时间是动态匹配的，由于时间在变化，每次传递的时间戳也是不一样的；每执行一次减去一秒（一秒等于100毫秒），系统会自动计算每次传递的时间戳，然后根据不同的时间戳去计算显示对应的时间（年，天，时，分，秒）。

完整代码：

<?php 

	$presentTime = new DateTime();
	$endTime     = new DateTime("2017-6-05");

	$timeDiff    = $presentTime->diff($endTime);
	$remainTime  = $endTime->getTimestamp() - $presentTime->getTimestamp();
?>


<html>
<head>

	<script language="JavaScript">

		var runtimes    = 0;    //执行次数
		var stopTimeout = '';   //清除定时器
		
		function GetRTime() {
		    
		        var nMS = <?php echo $remainTime ?> * 1000 - runtimes * 1000;  //这里是将秒转换成了毫秒

		        var nD = Math.floor(nMS/(1000*60*60*24))%365;    //获取天数
			var nH = Math.floor(nMS/(1000*60*60))%24;        //获取小时数
			var nM = Math.floor(nMS/(1000*60)) % 60;         //获取分钟
			var nS = Math.floor(nMS/1000) % 60;              //获取秒数
			    nS = nS < 10 ? '0' + nS : nS;	         //当秒数小于10时前面加0

			document.getElementById("RemainD").innerHTML = nD;
			document.getElementById("RemainH").innerHTML = nH;
			document.getElementById("RemainM").innerHTML = nM;
			document.getElementById("RemainS").innerHTML = nS;

			if ( nMS <= 60*1000 ) {
			  //这里当活动到了后，进行一系列的处理......
			}
			if (nMs == 0) {
				clearTimeout(stopTimeout);
			} else {
				runtimes++; //每执行一次加一（就是每走一次减去对应的毫秒数）
				stopTimeout = setTimeout("GetRTime()", 1000); //利用定时器实现动态效果
			}
		}
		window.onload = GetRTime;
	
	</script>

</head>

<body>


   <h1>剩余
   	<strong id="RemainD">XX</strong>天
   	<strong id="RemainH">XX</strong>小时
   	<strong id="RemainM">XX</strong>分
   	<strong id="RemainS">XX</strong>秒
   <h1>


</body>
</html>

效果如下：

关于PHP更多的时间操作函数可以参考： http://php.net/manual/zh/datetime.diff.php

关于php+js实现倒计时效果

猜你喜欢