用 js 和 php 行走(tic-toc)时钟
Walking (tic-toc) clock with js and php
在 javascript 和 php 上有一个带有 "walkin" 时钟的脚本(我需要服务器端时间 - 这很重要),但它停止并且直到刷新 a页。我做错了什么,请帮忙。谢谢。
<?php $Hour = date("H");
$Minute = date("i");
$Second = date("s");
$Day = date("d");
$Month = date("m"); ?>
<script type="text/javascript">
function clock() {
var d = new Date();
var month_num = d.getMonth();
var day = d.getDate();
var hours = <?php echo $Hour;?>;
var minutes = <?php echo $Minute;?>;
var seconds = <?php echo $Second?>;
month=new Array("января", "февраля", "марта", "апреля", "мая", "июня", "июля", "августа", "сентября", "октября", "ноября", "декабря");
if (day <= 9) day = "0" + day;
if (hours <= 9) hours = "0" + hours;
if (minutes <= 9) minutes = "0" + minutes;
if (seconds <= 9) seconds = "0" + seconds;
date_time = "Today - " + day + " " + month[month_num] + " " + d.getFullYear() + " y. Now - "+ hours + ":" + minutes + ":" + seconds;
if (document.layers) {
document.layers.doc_time.document.write(date_time);
document.layers.doc_time.document.close();
} else document.getElementById("doc_time").innerHTML = date_time;
setTimeout("clock()", 1000);}
</script>
<span id="doc_time">Date & time</span>
<script type="text/javascript">clock();</script>
php 代码在页面加载时运行一次,因此在每次调用 clock() 函数时,小时、分钟和秒将始终保持不变。
如果你真的需要做这样的事情,你必须使用 AJAX 每秒请求一个 php 脚本以从服务器获取当前时间,但请记住这些请求会有延迟,而且如果多个用户同时打开页面,会给服务器带来巨大的负载。
您的问题:
- PHP 在页面请求上提供相应的日期值。
- 您将这些值存储到 JS 中
- 你再次循环相同的值。因此循环有效但值未更改。
而不是你应该做的:
- 创建
var D = new Date("<?php echo date('D M d Y H:i:s O');?>");
在你的函数之外。
- 在每次超时时,将您的初始 PHP 日期增加一秒
DATE = PHP:initial + JS:now - JS:initial
function zero(n) { return n > 9 ? n : "0" + n; }
var months = [
"января", "февраля", "марта", "апреля", "мая", "июня",
"июля", "августа", "сентября", "октября", "ноября", "декабря",
];
var jsDate = new Date(); // Store JS time
// I'll hardcode a date string for demo purpose:
var phpDate = new Date("Sun Sep 09 2018 23:59:55 +0000");
// You, use this instead:
// var phpDate = new Date("<?php echo date('D M d Y H:i:s O');?>");
function clock() {
var diff = +new Date() - +jsDate; // Get seconds difference
var date = new Date(+phpDate + diff); // Add difference to initial PHP time
var y = date.getFullYear(),
M = date.getMonth(),
d = zero(date.getDate()),
h = zero(date.getHours()),
m = zero(date.getMinutes()),
s = zero(date.getSeconds());
document.getElementById("doc_time").innerHTML = `
Дата: ${d} ${months[M]} ${y}.  
Время: ${h}:${m}:${s}
`;
setTimeout(clock, 1000);
}
clock();
<div id="doc_time"></div>
在 javascript 和 php 上有一个带有 "walkin" 时钟的脚本(我需要服务器端时间 - 这很重要),但它停止并且直到刷新 a页。我做错了什么,请帮忙。谢谢。
<?php $Hour = date("H");
$Minute = date("i");
$Second = date("s");
$Day = date("d");
$Month = date("m"); ?>
<script type="text/javascript">
function clock() {
var d = new Date();
var month_num = d.getMonth();
var day = d.getDate();
var hours = <?php echo $Hour;?>;
var minutes = <?php echo $Minute;?>;
var seconds = <?php echo $Second?>;
month=new Array("января", "февраля", "марта", "апреля", "мая", "июня", "июля", "августа", "сентября", "октября", "ноября", "декабря");
if (day <= 9) day = "0" + day;
if (hours <= 9) hours = "0" + hours;
if (minutes <= 9) minutes = "0" + minutes;
if (seconds <= 9) seconds = "0" + seconds;
date_time = "Today - " + day + " " + month[month_num] + " " + d.getFullYear() + " y. Now - "+ hours + ":" + minutes + ":" + seconds;
if (document.layers) {
document.layers.doc_time.document.write(date_time);
document.layers.doc_time.document.close();
} else document.getElementById("doc_time").innerHTML = date_time;
setTimeout("clock()", 1000);}
</script>
<span id="doc_time">Date & time</span>
<script type="text/javascript">clock();</script>
php 代码在页面加载时运行一次,因此在每次调用 clock() 函数时,小时、分钟和秒将始终保持不变。
如果你真的需要做这样的事情,你必须使用 AJAX 每秒请求一个 php 脚本以从服务器获取当前时间,但请记住这些请求会有延迟,而且如果多个用户同时打开页面,会给服务器带来巨大的负载。
您的问题:
- PHP 在页面请求上提供相应的日期值。
- 您将这些值存储到 JS 中
- 你再次循环相同的值。因此循环有效但值未更改。
而不是你应该做的:
- 创建
var D = new Date("<?php echo date('D M d Y H:i:s O');?>");
在你的函数之外。 - 在每次超时时,将您的初始 PHP 日期增加一秒
DATE = PHP:initial + JS:now - JS:initial
function zero(n) { return n > 9 ? n : "0" + n; }
var months = [
"января", "февраля", "марта", "апреля", "мая", "июня",
"июля", "августа", "сентября", "октября", "ноября", "декабря",
];
var jsDate = new Date(); // Store JS time
// I'll hardcode a date string for demo purpose:
var phpDate = new Date("Sun Sep 09 2018 23:59:55 +0000");
// You, use this instead:
// var phpDate = new Date("<?php echo date('D M d Y H:i:s O');?>");
function clock() {
var diff = +new Date() - +jsDate; // Get seconds difference
var date = new Date(+phpDate + diff); // Add difference to initial PHP time
var y = date.getFullYear(),
M = date.getMonth(),
d = zero(date.getDate()),
h = zero(date.getHours()),
m = zero(date.getMinutes()),
s = zero(date.getSeconds());
document.getElementById("doc_time").innerHTML = `
Дата: ${d} ${months[M]} ${y}.  
Время: ${h}:${m}:${s}
`;
setTimeout(clock, 1000);
}
clock();
<div id="doc_time"></div>