CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
sadakpramodh
sadakpramodh

Reputation: 35

Why Jquery displays current system time after setting time using set minutes function?

http://127.0.0.1/readytoupload/time.php?time

{"hours":"06","minutes":"19","seconds":"22"}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
var ser_hours, ser_minutes, ser_seconds;

Date Object

var ser_date = new Date();

Update Time Function

function updateClock ( )
    {
    //var currentTime = new Date ( );
    var currentHours = ser_date.getHours ( );
    var currentMinutes = ser_date.getMinutes ( );
    var currentSeconds = ser_date.getSeconds ( );

    // Pad the minutes and seconds with leading zeros, if required
    currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
    currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

    // Choose either "AM" or "PM" as appropriate
    var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

    // Convert the hours component to 12-hour format if needed
    currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

    // Convert an hours component of "0" to "12"
    currentHours = ( currentHours == 0 ) ? 12 : currentHours;

    // Compose the string for display
    var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;


    $("#clock").html(currentTimeString);

 }

Fetching Time From Server

function getClock_server ()
{
    var ser_date = new Date();
    //ser_hours = d.hours; ser_minutes = d.minutes, ser_seconds = d.seconds
    $.get('http://127.0.0.1/readytoupload/time.php?time', function (d) { ser_date.setMinutes(d.minutes); ser_date.setSeconds(d.seconds); ser_date.setHours(d.hours);});
}
$(document).ready(function()
{
    getClock_server();
   setInterval('updateClock()', 1000);
});
</script>
<head>
<body>

Time Display section

<div id="clock"></div>

</body>
</html>

Upvotes: 2

Views: 149

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

The first problem is you are having ser_date as a local variable in getClock_server, instead you need to update the global variable.

Also to update the time, I think you need to get the difference between the current time and the time in which the server request was made

var systime, ser_date;

function updateClock() {
  var time = new Date(ser_date + new Date().getTime() - systime)
    //var currentTime = new Date ( );
  var currentHours = time.getHours();
  var currentMinutes = time.getMinutes();
  var currentSeconds = time.getSeconds();

  // Pad the minutes and seconds with leading zeros, if required
  currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
  currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;

  // Choose either "AM" or "PM" as appropriate
  var timeOfDay = (currentHours < 12) ? "AM" : "PM";

  // Convert the hours component to 12-hour format if needed
  currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;

  // Convert an hours component of "0" to "12"
  currentHours = (currentHours == 0) ? 12 : currentHours;

  // Compose the string for display
  var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;


  $("#clock").html(currentTimeString);

}

function getClock_server() {
  // $.get('http://127.0.0.1/readytoupload/time.php?time', function(d) {
  setTimeout(function() { //the timeout is used to simulate a ajax like async call
    var d = {
      hours: 10,
      minutes: 0,
      seconds: 25
    }

    var tmp = new Date();
    tmp.setMinutes(d.minutes);
    tmp.setSeconds(d.seconds);
    tmp.setHours(d.hours);

    ser_date = tmp.getTime();
    systime = new Date().getTime();

    updateClock();
    setInterval(updateClock, 1000);
  });
}
$(document).ready(function() {
  getClock_server();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="clock"></div>

Upvotes: 1

Related Questions