JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

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

JavaScript

jQuery.fn.digitalWatch = function(options) {
  
  var x = new Date(),
  		defaults = {
    
   			offset: -x.getTimezoneOffset() / 60,
    
  		}
  
  var settings = $.extend({}, defaults, options);

  var el = $(this),
  		calcTime = function() {
        // create Date object for current location
        d = new Date();
    
        // convert to msec
        // add local time zone offset 
        // get UTC time in msec
        utc = d.getTime() + (d.getTimezoneOffset() * 60000);
    
        // create new Date object for different city
        // using supplied offset
        nd = new Date(utc + (3600000*settings.offset));
        
        // return time
        return nd;
      },
  		init = function(){
        var date = calcTime(),
        		hours = date.getHours(),
            minutes = date.getMinutes(),
            seconds = date.getSeconds();

        if (hours < 10) hours = "0" + hours;
        if (minutes < 10) minutes = "0" + minutes;
        if (seconds < 10) seconds = "0" + seconds;
        
        el.html( hours + ":" + minutes + ":" + seconds );
        
        setTimeout(function(){
          init();
        }, 1000);
      };
  
  init();
}

//$('#clock').digitalWatch({offset:'+4'});
$('#clock').digitalWatch();