<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>倒计时</title> <link rel="stylesheet" type="text/css" href="/chat/layui/css/layui.css"/> <style> .kill_time { font-size: 80px; font-weight: bold; text-align: center; margin-top: 150px; } .kill_time span { width: 50px; padding: 10px; } </style> </head> <body> <div class="container"> <div><h2 style="text-align: center;margin-top: 50px;">活动开始时间: {{date('Y-m-d H:i:s',intval($start_time/1000))}}</h2> </div> <div class="kill_time"> <span id="kill_hours">00</span>: <span id="kill_minutes">00</span>: <span id="kill_seconds">00</span> </div> </div> <script type="text/javascript" src="/chat/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="/chat/layui/layui.js"></script> <script src="https://cdn.bootcss.com/socket.io/2.3.0/socket.io.js"></script> <script> const url_websocket = "{{env('URL_WEBSOCKET','ws://192.168.195.129:9603/websocket')}}"; var start_timestamp = "{{$start_time}}"; // 开始时间 毫秒 var server_timestamp = 0; //服务器时间戳 毫秒 var transfer_timestamp = 0; //网络传输时间差 毫秒 var error_timestamp = 0; //计算时间差 毫秒 var sync_timestamp = 5000; //同步时间差 毫秒 /** * websocket获取网络时间 */ var socket = io(url_websocket, {transports: ["websocket"]}); socket.on('connect', data => { setInterval(function () { socket.emit('getServerTimeStamp', ''); }, sync_timestamp); }); /** * 处理本地时间和服务器时间差 */ socket.on('setServerTimeStamp', data => { var data = JSON.parse(data); server_timestamp = data['timestamp']; var local_timestamp = new Date().getTime(); //let t = performance.timing.navigationStart + performance.now(); transfer_timestamp = performance.timing.responseEnd - performance.timing.responseStart; if (!transfer_timestamp) transfer_timestamp = 0; error_timestamp = local_timestamp - server_timestamp - transfer_timestamp; }); /** * 显示倒计时 */ setInterval(function () { var local_timestamp = new Date().getTime(); var time = start_timestamp - local_timestamp + error_timestamp; var hours = 0; var minutes = 0; var seconds = 0; if (time > 0) { hours = Math.floor(time / (3600 * 1000)); minutes = Math.floor((time - hours * 3600 * 1000) / (60 * 1000)); seconds = Math.ceil((time - hours * 3600 * 1000 - minutes * 60 * 1000) / 1000); } $("#kill_hours").html(hours < 10 ? '0' + hours : hours); $("#kill_minutes").html(minutes < 10 ? '0' + minutes : minutes); $("#kill_seconds").html(seconds < 10 ? '0' + seconds : seconds); }, 500); </script> </body> </html>
php
/** * websocket 返回服务器时间 * @Event("getServerTimeStamp") * @param Socket $socket * @param string $data */ public function onGetServerTimeStamp(Socket $socket, string $data) { $timestamp = microtime(true)*1000; $res['server_date'] = date('Y-m-d H:i:s'); $res['time'] = time(); $res['timestamp'] = floor($timestamp); socketIo()->of('/websocket')->to($socket->getSid())->emit('setServerTimeStamp', Json::encode($res)); }