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

时间:2021-03-23 22:00:29

最近项目需要实现一个倒计时的效果,大概需求就是一个新产品上架,可以添加为试用产品,对添加为试用产品的产品有一个时间要求(比如试用为三天),过了这个时间段,试用就结束了。 

后台+前台实现,思路如下:

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);


效果如下:

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

以上是使用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+js实现倒计时效果

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