CODEWITHSUNDEEP
phpjavascriptdatetime
Aidan Sheriff
Aidan Sheriff

Reputation: 114

How to make Javascript use time from the world clock (GMT to be specific)

I am trying to create a Javascript clock that will display the current Actual time, rather than displaying the local time of the client machine.

The clock is part of a script which calculates the difference in time between two values (in php but the purpose of this clock is to give a visual representation). It is important that the user of the script cannot change the time that is displayed as this will produce incorrect results for the outcome of the whole program.

I realise that i may have to use a php function to return the time in a particular time zone but i do not understand how to input this into my script. My Javascript clock code is below (currenttime_large is the ID of the DIV container of this script) :

    <script type="text/javascript" language="javascript">
  function renderTime() {
      var currentTime = new Date();
      var h = currentTime.getHours();
      var m = currentTime.getMinutes();
      var s = currentTime.getSeconds();
      setTimeout('renderTime()',1000);
      if (h == 0) {
          h = 12;
      } 
      if (h < 10) {
          h = "0" + h;
      }
      if (m < 10) {
          m = "0" + m;
      }
      if (s < 10) {
          s = "0" + s;
      }
      var myClock = document.getElementById('currenttime_large');
      myClock.textContent = h + ":" + m + ":" + s + " ";
      myClock.innerText = h + ":" + m + ":" + s + " ";
  }
  renderTime();
    </script>

Please could someone advise how this script can be adjusted so that the clock which is displayed, displays GMT(London) time rather than the client time.

Many thanks in advance,

Aidan

Upvotes: 0

Views: 4911

Answers (4)

Subha Jeet Sikdar
Subha Jeet Sikdar

Reputation: 446

It can be done without PHP. I ve done it using simple HTML and JavaScript calculations. Note: This clock IS NOT UNIVERSAL. Because i live in india, i fixed all parameters according to Indian GMT (5:30). If someone wants to use it who does not live in India will have to customize parameters according their own country GMT

How my code works? Here is your answer

  1. First we have created a simple timer program.
  2. Passed the time argument to a function called london() 3.in function london() everything is processed. I have put GMT of India. using the parameters function london is producing correct London time from Indian time and given GMT time

Note: 1. As this code is not universal.. people out of India will have to customize it as they want...

2.This code uses device time and processes correct GMT 0 time. Example my code works substracting 5 hours and 30 minutes from device time because my GMT is 5:30 (India)

3.Will work fine offline

4.If someone changes country(GMT) they will have to customize code again

Full Code 

 <body onload="timer()">
 <p id="txt1"></p>
  <p id="txt2"></p>
  <script>

  function timer(){

    //Getting Device Time

   var today = new Date();
   var h = today.getHours();
   var m = today.getMinutes();
   var s = today.getSeconds();

  //Returning value of ckeckTime();
   m = checkTime(m);
   h = checkTime(h);
   s = checkTime(s);

  var trigger = setTimeout(timer,1000);

    document.getElementById("txt1").innerHTML = h+" "+m+" "+s; 

    london(h,m,s); //Passing device time to function london

    }


    function london(h,m,s){

    //This function produces london time

    //var h (Device hour)
       // m (Device minute)
       // s (Device second)

    defhr = 5; //define hour
    defmn = 30; //define minutes

    /* defhr = 5 and defmn = 30 according to India GMT +5 30*/

    if(m < defmn){ //When device minute is less than define minutes

    defhr += +0
    var hour = h - defhr;
    let x = m - defmn;
    var min = 60 + x;

    } else {

    defhr += -1
    var hour = h - defhr;
    var min = m - defmn;

    }

    if(h < defhr){ //When device hour is less than define hour

    let y = defhr - h;
    var hour = 24 - y;

    }else {

    var hour = h - defhr;

    }

    // returning value of checkTime();
    hour = checkTime(hour);
    min = checkTime(min);



    document.getElementById("txt2").innerHTML = hour+" "+min+" "+s;

    }


    //checkTime function adds 0 in front a number when it is less than 10
    function checkTime(i){
    if(i<10){ i="0"+i; }
    return i;
    }

    </script>
    </body>

    </html>

Tip: 1. If you live in western countries or GMT value is negative then put negative value in defhr and defmn section.

  1. If anyone is using this code in GMT + 5:30 (India) They will not need customization.

  2. Make sure your code is producing correct London GMT time.. Grab notebook,calculator or you can test it with online world clock too

Upvotes: 0

Bhaskar Bhatt
Bhaskar Bhatt

Reputation: 1467

I was searching of world analog clock. i found one source/example which is basically cretated with jQuery, Html 5, CSS 3 and canvas.

Source : https://github.com/php-dedicated-developers/world-clock

Upvotes: 0

ilyas Jumadurdyew
ilyas Jumadurdyew

Reputation: 930

I've been looking over something like this, The best solution I've found is this http://www.jqueryscript.net/demo/jQuery-Based-Analog-And-Digital-World-Clock-jClocksGMT-js/

If you want you can save the whole page, or download necessary files if they not saved automatically. Then in your html code you just change the GMT timezone according to ID.

That's it

Upvotes: 0

Paul Roub
Paul Roub

Reputation: 36438

Use the getUTC... methods:

var h = currentTime.getUTCHours();
var m = currentTime.getUTCMinutes();
var s = currentTime.getUTCSeconds();

Upvotes: 1

Related Questions