GENWiki

Premier IT Outsourcing and Support Services within the UK

User Tools

Site Tools


html:browser_based_our_time_your_time_widget
<html>
<head>
<style>
.ed-widget__body {
    padding: 24px;
    overflow-x: hidden;
}
 
.ed-widget--timezone {
    position: relative;
}
 
.ed-widget--timezone__icon {
    position: absolute;
    top: 10px;
    right: 20px;
    font-style: normal;
    color: #50ae54;
}
 
.ed-widget--timezone__icon:before {
    font-size: 40px;
    font-family: "streamline-30px";
    content: "\e53d"
}
 
.ed-widget--timezone__item + .ed-widget--timezone__item {
    margin-top: 10px
}
 
.ed-widget--timezone--is-offline {
    background-color: #242f31;
    color: #aaa
}
 
.ed-widget--timezone--is-offline .ed-widget--timezone__time {
    color: #fff;
    font-weight: 700
}
 
.ed-widget--timezone--is-offline .ed-widget--timezone__icon {
    color: #aaa
}
 
.ed-widget--timezone--is-offline .ed-widget--timezone__icon:before {
    content: "\e539"
}
</style>
<script>
var dashboard = {
    updateClock: function(t) {
        var e = new Date(),
            n = e.getHours(),
            i = e.getMinutes(),
            o = e.getSeconds(),
            r = n < 12 ? "AM" : "PM",
            a = (n = 0 == (n = 12 < n ? n - 12 : n) ? 12 : n) + ":" + (i = (i < 10 ? "0" : "") + i
            ) + ":" + (o = (o < 10 ? "0" : "") + o) + " " + r;
        $(t).html(a)
    },
    updateLocalClock: function(t) {
        Date.withOffset = function(t) {
            return d = new Date(), utc = d.getTime() + 6e4 * d.getTimezoneOffset(), nd = new Date(utc + 36e5 * t), nd
        };
        var e = Date.withOffset(0), 
            n = e.getHours(),
            i = e.getMinutes(),
            o = e.getSeconds(),
            r = n < 12 ? "AM" : "PM",
            a = (n = 0 == (n = 12 < n ? n - 12 : n) ? 12 : n) + ":" + (i = (i < 10 ? "0" : "") + i) + ":" + (o = (o < 10 ? "0" : "") + o) + " " + r;
        $(t).html(a)
    }
}
 
 
setInterval(function(){dashboard.updateClock('[data-time-user]');dashboard.updateLocalClock('[data-time-support]');},1000);
</script>
</head>
<body>
 
<div class="ed-widget ed-widget--timezone  ed-widget--timezone--is-offline">
  <div class="ed-widget__body">
    <div class="">
      <i class="ed-widget--timezone__icon"></i>
        <div class="ed-widget--timezone__item">
          <div class="ed-widget--timezone__title">Your time</div>
          <div class="ed-widget--timezone__time" data-time-user="">4:39:02 PM</div>
        </div>
        <div class="ed-widget--timezone__item">
          <div class="ed-widget--timezone__title">Our time</div>
          <div class="ed-widget--timezone__time" data-time-support="">11:39:02 PM</div>
        </div>
      </div>
    </div>
</div>
 
</body>
</html>

The Javascript can be seen to be using JQuery, but you could quiet easily rewrite this to use vanilla JS by replacing the $(t).html(a) with document.getElementById(….

Set your local timezone using

Date.withOffset(0)

Where 0 is the offset from GMT. You could (and probably should) provide this from the backend in PHP taking the current server clock's timezone offset.

/data/webs/external/dokuwiki/data/pages/html/browser_based_our_time_your_time_widget.txt · Last modified: 2019/06/14 15:47 by genadmin

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki