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.
/home/gen.uk/domains/wiki.gen.uk/public_html/data/pages/html/browser_based_our_time_your_time_widget.txt · Last modified: 2019/06/14 15:47 by genadmin