CODEWITHSUNDEEP
phpjavascript
Abdulrahman
Abdulrahman

Reputation: 121

PHP with javascript code, live clock

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.

Upvotes: 1

Views: 37503

Answers (3)

Kamlesh
Kamlesh

Reputation: 664

 <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

Upvotes: 4

markus
markus

Reputation: 561

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>

Upvotes: 1

scunliffe
scunliffe

Reputation: 63580

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)

Upvotes: 5

Related Questions