Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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.

share|improve this question
1  
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 at 13:38
1  
Switched your references from "java" to "javascript", they aren't the same thing :) – jbabey Jan 28 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 at 13:39
1  
1  
I want to display the server time. – abd Jan 28 at 14:10
show 4 more commentsadd comment (requires an account with 50 reputation)

2 Answers

up vote 2 down vote

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)

share|improve this answer
The format i want to display it's like "h:MM:ss TT", How can i change your code for that? – abd Jan 28 at 14:08
1  
+1 for using dead reckoning and not polling the server every second. – starbeamrainbowlabs Jan 28 at 14:12
add comment (requires an account with 50 reputation)
up vote 0 down vote

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>
share|improve this answer
add comment (requires an account with 50 reputation)

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.