代码之家 › 专栏 › 技术社区 › WebSon

带js和php的步行(tic-toc)时钟

clock time jquery php javascript

WebSon · 技术社区 · 6 年前

<?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. &nbsp;&nbsp;&nbsp;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>

2 回复 | 直到 6 年前

Roko C. Buljan 6 年前

您的问题:

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}. &emsp;
    ÐÑÐµÐ¼Ñ: ${h}:${m}:${s}
  `;

  setTimeout(clock, 1000);
}

clock();

<div id="doc_time"></div>

r3zaxd1 6 年前

php代码在页面加载时运行一次,因此在每次调用clock()函数时,小时、分钟和秒始终保持不变。

如果您真的需要这样做,您必须使用AJAX每秒请求一个php脚本,以从服务器获取当前时间,但请记住,如果多个用户同时打开页面,这些请求将有延迟,并且还会给服务器带来巨大的负载。