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
– Anthony Forloney, Commented Jan 28, 2013 at 13:38
Switched your references from "java" to "javascript", they aren't the same thing :) — jbabey
– jbabey, Commented Jan 28, 2013 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
– UnholyRanger, Commented Jan 28, 2013 at 13:39

scunliffe · Accepted Answer · 2013-01-28 14:20:36Z

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, 2013 at 14:20

answered Jan 28, 2013 at 13:56

scunliffe

63.8k26 gold badges132 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abdulrahman Over a year ago

The format i want to display it's like "h:MM:ss TT", How can i change your code for that?

starbeamrainbowlabs Over a year ago

+1 for using dead reckoning and not polling the server every second.

Kamlesh · Accepted Answer · 2018-07-19 10:59:11Z

4

 <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

edited Jul 19, 2018 at 10:59

user9159750

answered Jul 31, 2014 at 10:18

Kamlesh

6649 silver badges22 bronze badges

1 Comment

Eyal Sooliman Over a year ago

To display "0" when needed i added the <script> with the following: curr_min = checkTime(curr_min); curr_sec = checkTime(curr_sec); function checkTime(i) { if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10 return i; }

markus · Accepted Answer · 2013-01-28 14:39:14Z

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>

Collectives™ on Stack Overflow

PHP with javascript code, live clock

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related