解决PHP与JS时间显示静态化问题：实时时钟实现原理

PHP与JS执行机制差异分析

首先分析以下代码片段。

$(function(){

setInterval(function(){
var timer = '<?php echo date("Y-m-d H:i:s",time()) ?>';
$("#test").append(timer);
},500);
});

问题根源：静态时间赋值

这段代码存在逻辑缺陷，导致网页加载后显示的时间固定不变，无法实时更新。这涉及到PHP与JavaScript两种语言在加载和执行机制上的本质区别。

上述写法是错误的。因为PHP代码在服务器端输出HTML之前就已经被解释执行，浏览器最终接收到的只是PHP执行后的静态结果。

$(function(){
 
setInterval(function(){
var timer = '2015-01-02 12：02：02';
$("#test").append(timer);
},500);
});

解决方案：前端实时格式化

因此，JavaScript变量timer获取的是一个固定的字符串值，导致每次定时器触发时都追加相同的静态时间。修正方案如下所示。

// 对Date的扩展，将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， 
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) 
// 例子： 
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 
// (new Date()).Format("yyyy-M-d h:m:s.S")   ==> 2006-7-2 8:9:4.18 
Date.prototype.Format = function (fmt) { //author: meizz 
  var o = {
    "M+": this.getMonth() + 1, //月份 
    "d+": this.getDate(), //日 
    "h+": this.getHours(), //小时 
    "m+": this.getMinutes(), //分 
    "s+": this.getSeconds(), //秒 
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
    "S": this.getMilliseconds() //毫秒 
  };
  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  for (var k in o)
  if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
  return fmt;
}
 
$(function(){
 
setInterval(function(){
var timer = new Date().Format("yyyy-MM-dd HH:mm:ss");
$("#test").append(timer);
},500);
});