php实时倒计时功能实现方法详解


Posted in PHP onFebruary 27, 2017

本文实例讲述了php实时倒计时功能实现方法。分享给大家供大家参考,具体如下:

这几天公司要做一个限时购物的功能.这就要做到倒计时,要有实时的倒计时.

要求:

1) 要有小时分钟秒的实时倒计时的显示
2)用户端修改日期时间不会影响到倒计时的正常显示(也就是以服务器时间为准)

其实这和很多的考试等系统的时间限制功能同样的要求.

解决思路:

1)总不能用ajax每秒都获取服务器时间吧.

所以实时倒计时一定要用javascript实现.这很简单.网上一大把的例子.

2)现在问题是解决用户端修改日期时间对我们的显示的影响.
解决的办法是计算出用户端的时间和服务器的时间差.这样问题的完成解决了.

这样只需要运行一次php.实时倒计时的时间就和服务器的时间同步了.

理论是同步的,但实际测试会有1秒的误差.(具体原因就是和网速有关,网速越快,误差就越小),但这决不会影响到我们上面的要求了.

实例:

代码:

<?php
//php的时间是以秒算。js的时间以毫秒算
date_default_timezone_set("Asia/Hong_Kong");//地区
//配置每天的活动时间段
$starttimestr = "09:00:00";
$endtimestr = "18:30:00";
$starttime = strtotime($starttimestr);
$endtime = strtotime($endtimestr);
$nowtime = time();
?>
<!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 EndTime=<?=$endtime*1000?>;
var NowTime = new Date();
//计算出服务器和客户端的时间差。
var dTime = <?=$nowtime*1000?>-NowTime.getTime();
function GetRTime(){
var NowTime = new Date();
var nMS = EndTime - NowTime.getTime()-dTime;
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("还有最后五分钟!");
}
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>

实例2:

修改了上面的一些bug

代码:

<?php
//php的时间是以秒算。js的时间以毫秒算
date_default_timezone_set("Asia/Hong_Kong");//地区
//配置每天的活动时间段
$starttimestr = "09:00:00";
$endtimestr = "18:30:00";
$starttime = strtotime($starttimestr);
$endtime = strtotime($endtimestr);
$nowtime = time();
?>
<!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 EndTime=<?=$endtime*1000?>;
var NowTime = new Date();
//计算出服务器和客户端的时间差。
var dTime = NowTime.getTime()-<?=$nowtime*1000?>;
var runtimes = 0;
function GetRTime(){
var NowTime = new Date();
var dTimeNew = NowTime.getTime()-<?=$nowtime*1000?>;
var dTimesM = Math.abs(Math.floor((dTimeNew-runtimes*1000-dTime)/1000));//客户端时间和服务器当前时间的差
if (dTimesM>1) {//如果用户修改了客户端时间,就重新load本页
window.location.reload();
}
var nMS = EndTime - NowTime.getTime()+dTime;
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>

实例3:

思路不同,简单多了.

代码:

<?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>
PHP 相关文章推荐
增加反向链接的101个方法 站长推荐
Jan 31 PHP
PHP Directory 函数的详解
Mar 07 PHP
PHP中图片等比缩放的实例
Mar 24 PHP
PHP swfupload图片上传的实例代码
Sep 30 PHP
PHP利用str_replace防注入的方法
Nov 10 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
Jul 29 PHP
19个Android常用工具类汇总
Dec 30 PHP
php采集神器cURL使用方法详解
Feb 19 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
Jun 05 PHP
php给数组赋值的实例方法
Sep 26 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
Oct 17 PHP
PHP中类与对象功能、用法实例解读
Mar 27 PHP
php自定义截取中文字符串-utf8版
Feb 27 #PHP
PHP读取XML格式文件的方法总结
Feb 27 #PHP
PHP批量修改文件名称的方法分析
Feb 27 #PHP
php基于PDO实现功能强大的MYSQL封装类实例
Feb 27 #PHP
php实现通过soap调用.Net的WebService asmx文件
Feb 27 #PHP
PHP 中使用ajax时一些常见错误总结整理
Feb 27 #PHP
PHP/HTML混写的四种方式总结
Feb 27 #PHP
You might like
2019十大人气国漫
2020/03/13 国漫
ajax缓存问题解决途径
2006/12/06 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
php版微信自动获取收货地址api用法示例
2016/09/22 PHP
PHP的反射机制实例详解
2017/03/29 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
JS读写CSS样式的方法汇总
2016/08/16 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
Seajs源码详解分析
2019/04/02 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
Python多线程编程(一):threading模块综述
2015/04/05 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
Python线程同步的实现代码
2018/10/03 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
应聘教师自荐信
2013/10/12 职场文书
应用数学自荐书范文
2013/11/24 职场文书
三年大学自我鉴定
2014/01/16 职场文书
年检委托书
2014/08/30 职场文书
史上最牛辞职信
2015/05/13 职场文书
毕业论文致谢信
2015/05/14 职场文书
python解决12306登录验证码的实现
2021/04/18 Python