PHP with javascript code, live clock

Question

Hey I would to create a live clock to put it on my website. So I wrote a simple php with JavaScript code for that, here is it:

<?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>

When run this code the output like "2:40:17 PM", the div refreshed every second but the problem is the time never changed.

Have you tried removing the quotes around `startTime` in your `setInterval` function? The quotes and the `()` are unnecessary as, `setInterval(startTime,1000);` would suffice. — Anthony Forloney, Jan 28 '13 at 13:38
Switched your references from "java" to "javascript", [they aren't the same thing](http://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java) :) — jbabey, Jan 28 '13 at 13:39
PHP is a server side language. You would need to make a call to the server to do your function each time. Your code is compiled to have the same time displayed everytime. righ click -> view source — UnholyRanger, Jan 28 '13 at 13:39
see http://stackoverflow.com/questions/7780758/javascript-clock-with-server-time — Rachel Gallen, Jan 28 '13 at 13:40
in before 'use jQuery', as Anthony Forloney stated, remove the quotes and it will work. — Gonçalo Vieira, Jan 28 '13 at 13:40
Do you want the server's time or the client computer's time? They can be *very different*. — Alvin Wong, Jan 28 '13 at 13:42
If you want to use the servers' time to start the clock that's fine but from that point on you'll want to use JavaScript. Your function attempts to fetch the time from a PHP function on each interval which doesn't work as coded but would also be the wrong solution. — scunliffe, Jan 28 '13 at 13:47
Thanks for all of you for your help, i tried to remove the qoutes and (), it does not work. Anthony Forloney — Abdulrahman, Jan 28 '13 at 14:10

scunliffe · Answer 1 · 2013-01-28T14:20:36.763

5

Get the initial time you want to start your clock with from 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>

For formatting the date there's a zillion options (MDN Date API: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date)

edited Jan 28 '13 at 14:20

answered Jan 28 '13 at 13:56

scunliffe

62,582
25
126
161

The format i want to display it's like "h:MM:ss TT", How can i change your code for that? – Abdulrahman Jan 28 '13 at 14:08
2

+1 for using dead reckoning and not polling the server every second. – starbeamrainbowlabs Jan 28 '13 at 14:12

score 4 · Answer 2 · edited Jul 19 '18 at 10:59

 <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>

use this way to display time........ enjoy the above script

To display "0" when needed i added the – Eyal Sooliman May 23 '16 at 08:21 — Eyal Sooliman, May 23 '16 at 08:21

score 1 · Answer 3 · answered Jan 28 '13 at 14:39

You can use ajax to refresh the time:

Example:

<?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>

PHP with javascript code, live clock

3 Answers3

Linked