客户端与服务端的时间一致性的解决

本文介绍了一个使用PHP后端与JavaScript前端相结合实现的实时倒计时功能。该功能通过设置特定的开始和结束时间,在指定的时间范围内进行精确到秒的倒计时显示。同时,该程序还具备检测客户端时间篡改的功能,一旦发现时间被更改,则会自动刷新页面。
<?php

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

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

//配置每天的活动时间段
$starttimestr = "09:00:00";
$endtimestr = "20:47: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>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值