php - PHP 与 javascript 代码，实时时钟

Question

嘿，我会创建一个实时时钟将其放在我的网站上。因此，我为此编写了一个带有 JavaScript 代码的简单 php，如下所示：

<?php
    Function d1() {  
        $time1 = Time();  
        $date1 = date("h:i:s A",$time1);  
        echo $date1;  
    }
?>  

<script type="text/javascript">   
    window.onload = startInterval;  
    function startInterval() {  
        setInterval("startTime();",1000);  
    }
    function startTime() {  
        document.getElementById('qwe').innerHTML = '<?php d1();?>';  
    }  
</script>  

<div id="qwe">test</div>  

运行此代码时，输​​出类似于每秒刷新一次"2:40:17 PM"，但问题是时间从未改变。div

Answer 1

从 PHP 获取您想要开始时钟的初始时间：

<script>
    var now = new Date(<?php echo time() * 1000 ?>);
    function startInterval(){  
        setInterval('updateTime();', 1000);  
    }
    startInterval();//start it right away
    function updateTime(){
        var nowMS = now.getTime();
        nowMS += 1000;
        now.setTime(nowMS);
        var clock = document.getElementById('qwe');
        if(clock){
            clock.innerHTML = now.toTimeString();//adjust to suit
        }
    } 
</script>

对于格式化日期，有无数个选项（MDN 日期 API：https ://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date ）

Answer 2

 <script type="text/javascript">
 function timedMsg()
  {
    var t=setInterval("change_time();",1000);
  }
 function change_time()
 {
   var d = new Date();
   var curr_hour = d.getHours();
   var curr_min = d.getMinutes();
   var curr_sec = d.getSeconds();
   if(curr_hour > 12)
     curr_hour = curr_hour - 12;
   document.getElementById('Hour').innerHTML =curr_hour+':';
    document.getElementById('Minut').innerHTML=curr_min+':';
    document.getElementById('Second').innerHTML=curr_sec;
 }
timedMsg();   
</script>

 <table>
   <tr>
  <td>Current time is :</td>

  <td id="Hour" style="color:green;font-size:large;"></td>
  <td id="Minut" style="color:green;font-size:x-large;"></td>
  <td id="Second" style="color:red;font-size:xx-large;"></td>
  <tr>
 </table> 

用这种方式显示时间............享受上面的脚本

Answer 3

可以使用ajax来刷新时间：

例子：

<?php
if(@$_GET["action"]=="getTime"){
  $time1 = Time();  
  $date1 = date("h:i:s A",$time1);  
  echo $date1; // time output for ajax request
  die();  
}
?>

<div id="qwe">test</div>

<script type="text/javascript">   
  window.onload = startInterval;  
  function startInterval() {  
    setInterval("startTime();",1000);  
  }
  function startTime() {
    AX = new ajaxObject("?action=getTime", showTime)
    AX.update(); // start Ajax Request   
  } 
  // CallBack 
  function showTime( data ){
    document.getElementById('qwe').innerHTML = data;
  }  
</script>  



<script type="text/javascript">
// Ajax Object - Constructor
function ajaxObject(url, callbackFunction) {
  var that=this;
  this.updating = false;
  this.abort = function() {
    if (that.updating) {
      that.updating=false;
      that.AJAX.abort();
      that.AJAX=null;
    }
  };
  this.update =
  function(passData,postMethod) {
    if (that.updating) { return false; }
    that.AJAX = null;
    if (window.XMLHttpRequest) {
      that.AJAX=new XMLHttpRequest();
    }else{
      that.AJAX=new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (that.AJAX==null) {
      return false;
    }else{
      that.AJAX.onreadystatechange = function() {
        if (that.AJAX.readyState==4) {
          that.updating=false;
          that.callback( that.AJAX.responseText, that.AJAX.status, that.AJAX.responseXML, that.AJAX.getAllResponseHeaders() );
          that.AJAX=null;
        }
      };
      that.updating = new Date();
      if (/post/i.test(postMethod)) {
        var uri=urlCall+(/\?/i.test(urlCall)?'&':'?')+'timestamp='+that.updating.getTime();
        that.AJAX.open("POST", uri, true);
        that.AJAX.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        that.AJAX.setRequestHeader("Content-Length", passData.length);
        that.AJAX.send(passData);
      }else{
        var uri=urlCall+(/\?/i.test(urlCall)?'&':'?')+passData+'&timestamp='+(that.updating.getTime());
        that.AJAX.open("GET", uri, true);
        that.AJAX.send(null);
      }
      return true;
    }
  };
  var urlCall = url;
  this.callback = callbackFunction || function (){};
}
</script>