关于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;

效果如下：

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

使用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实现倒计时效果

相关文章