Make a date/time value called from an API tick very second. (JavaScript)

Question

I'm calling a date and time through an API, which looks like this:

<?php $xml = simplexml_load_file("https://api.eveonline.com/server/ServerStatus.xml.aspx/"); ?>
<div class="server-time">
    <?php echo $xml->currentTime; ?>
</div>

This will show a date and time like this on the page:

2013-10-16 08:15:36

Now I want this clock to tick every second and the time and even date (in case it's just seconds before midnight when the user visits the site) values to change accordingly, just like you would expect a digital clock to work.

I know this is possible with JavaScript but since I am a total rookie at it I don't know how to do this - at all.

Help would be highly appriciated!

Answer 1

There are many javascript clocks out there, you don't even have to use an API to get the time and date!

function clock(id) {

    //Create a new Date object.
    oDate = new Date();

    //Get year (4 digits)
    var year = oDate.getFullYear();

    //Get month (0 - 11) - NOTE this is using indexes, so 0 = January.
    var month = oDate.getMonth();

    //Get day (1 - 31) - not using indexes.
    var day = oDate.getDate();

   //Get hours
   var hours = oDate.getHours();

   //Get minutes
   var minutes = oDate.getMinutes();

   //Get seconds
   var seconds = oDate.getSeconds();

   //Maybe create a function that adds leading zero's here

   var dateStr = '';
   dateStr += year+' - '+month+' - '+day+' '+hours+':'+minutes+':'+seconds;
   //Append dateStr to some element.
   document.getElementById(id).innerHTML = dateStr;

   //Repeat the function every 1000 miliseconds aka 1 second
   setTimeout(function() {
        clock(id);
   }, 1000);

}

The usage would be

<div id="yourID">clock input will go here</div>

clock('yourID');

NOTE

This function has to be called after the DOM is loaded, otherwise this would result in error.

This can be achieved by placing the script tag with your JS at the bottom of the page (not using jQuery that is).

Otherwise if using jQuery, call the $(function() {}) (equivelant to $(document).ready(function() {});

The function is quite self-explanatory, but maybe you would want to read up on the functions to see exactly what they do.

a quick google search should do the trick.

Anyways hope this helps, good luck :)

Answer 2

I'm not sure if you want it to fetch the time from the api every second or, if you want it to just increase every second, starting from the given api time. In the latter case, you should use setInterval:

function updateTime() {
    // assuming you are using jquery for DOM manipulation:
    var timestamp = $('.server-time').text();
    var date = new Date(timestamp);
    date.setSeconds(date.getSeconds() + 1);

    $('.server-time').text(date.toString());
}

setInterval(updateTime, 1000);

If you are not using jquery, just use document.getElementById or something like that:

change your element to:

<div id="server-time">

and use the following snippet:

function updateTime() {
    // assuming you are using jquery for DOM manipulation:
    var timestamp = document.getElementById('server-time').innerHTML;
    var date = new Date(timestamp);
    date.setSeconds(date.getSeconds() + 1);

    document.getElementById('server-time').innerHTML = date.toString();
}