Я хочу отображать несколько часов в разных часовых поясах
Я использую analogClockJs - автономную библиотеку JavaScript для создания настраиваемых, простых в использовании аналоговых часов с использованием простого JavaScript и CSS.
демонстрация часов javascript
function AnalogClock(id, option, datestr) {
var dateTimeFormat = function(time) {
var str = "";
str += time.getYear() + (time.getYear() > 1900 ? 0 : 1900) + "-";
str += time.getMonth() + 1 + "-";
str += time.getDate() + "<br/> ";
str += time.getHours() + ":";
str += time.getMinutes() + ":";
str += time.getSeconds();
return str;
}
if (!option)
option = {}; //avoid undefined exception
this.foreColor = option.foreColor ? option.foreColor : "#000"; //text color
this.bgColor = option.bgColor ? option.bgColor : "#eee";
this.width = option.width ? option.width : 400;
this.container = document.getElementById(id);
if (!this.container)
return;
this.container.style.fontcolor = this.foreColor;
//the static part
//the outer panel of the clock, including the background
this.panel = document.createElement("div"); //border-radius:50%;background-color:#eee;border:solid 1px #ccc;width:400px;height:400px;position:relative;
this.panel.style.borderRadius = "50%";
this.panel.style.backgroundColor = this.bgColor;
this.panel.style.border = "solid 1px #ccc";
this.panel.style.width = this.width + "px";
this.panel.style.height = this.width + "px";
this.panel.style.position = "relative";
this.container.appendChild(this.panel);
//the digital clock on the panel
var label = document.createElement("h4"); //width:80%;line-height:40px;text-align:center;margin-top:250px;color:#333;
label.style.width = "100%";
label.style.textAlign = "center";
label.style.fontWeight = "normal";
label.style.fontSize = this.width / 10 + "px";
label.style.marginTop = this.width * 0.6 + "px";
label.style.color = this.foreColor;
label.innerHTML = dateTimeFormat(datestr);
if (this.width >= 100) //hide if the width is not enough to show the digital clock
this.panel.appendChild(label);
//the container of hour numbers on the panel
var ul = document.createElement("ul"); //padding:0;margin:0;list-style:none;position:absolute;left:180px;
ul.style.height = "100%";
ul.style.padding = "0";
ul.style.margin = "0";
ul.style.listStyle = "none";
ul.style.position = "absolute";
ul.style.width = 40 + "px";
ul.style.top = 0;
ul.style.left = this.width / 2 - 20 + "px";
ul.style.color = this.foreColor;
this.panel.appendChild(ul);
//the list of hour numbers on the panel
for (var i = 0; i <= 5; i++) {
if (!localStorage) //if html5 not supported
break;
var list = document.createElement("li"); //padding:0;margin:0; position: absolute; text-align:center;width:40px;height:400px;font-size:40px;
list.style.padding = "0";
list.style.margin = "0";
list.style.position = "absolute";
list.style.textAlign = "center";
list.style.width = "40px";
list.style.height = this.width + "px";
list.style.fontSize = this.width / 10 + "px";
ul.appendChild(list);
list.style.transform = "rotate(" + 360 / 12 * (i + 1) + "deg)";
//a pair of numbers, such as 1 and 7, 3 and 9, etc.
var numTop = document.createElement("div"); //width:100%;position:absolute;text-align:center;
numTop.style.width = "100%";
numTop.style.position = "absolute";
numTop.style.textAlign = "center";
numTop.innerHTML = i + 1;
if (this.width < 100)
numTop.innerHTML = "�?";
list.appendChild(numTop);
numTop.style.transform = "rotate(" + -360 / 12 * (i + 1) + "deg)"; //recover the rotation
var numBottom = document.createElement("div"); //width:100%;position:absolute;text-align:center;
numBottom.style.width = "100%";
numBottom.style.position = "absolute";
numBottom.style.textAlign = "center";
numBottom.style.bottom = "0";
numBottom.innerHTML = i + 7;
if (this.width < 100)
numBottom.innerHTML = "�?";
list.appendChild(numBottom);
numBottom.style.transform = "rotate(" + -360 / 12 * (i + 1) + "deg)"; //recover the rotation
}
//hour hand
var hour = document.createElement("div"); //width:8px;height:8px;left:196px;top:96px;border-top:solid 100px #ff6a00; border-bottom-width:100px;
var hourWidth = this.width * 0.02;
var hourTop = this.width * 0.25 - (hourWidth * 0.5);
var hourleft = this.width * 0.5 - hourWidth * 0.5;
hour.style.width = hourWidth + "px";
hour.style.height = hourWidth + "px";
hour.style.position = "absolute";
hour.style.border = "solid 0px transparent";
hour.style.left = hourleft + "px";
hour.style.top = hourTop + "px";
hour.style.borderTop = "solid " + (this.width * 0.5 - hourTop) + "px #f60";
hour.style.borderBottomWidth = (this.width * 0.5 - hourTop) + "px";
if (localStorage) //only visible in HTML5 supported browser
this.panel.appendChild(hour);
//minute hand
var min = document.createElement("div"); //width:4px;height:4px;left:198px;top:48px;border-top:solid 150px #0094ff; border-bottom-width:150px;
var minWidth = this.width * 0.01;
var minTop = this.width * 0.1 - (minWidth * 0.5);
var minleft = this.width * 0.5 - minWidth * 0.5;
min.style.width = minWidth + "px";
min.style.height = minWidth + "px";
min.style.position = "absolute";
min.style.border = "solid 0px transparent";
min.style.left = minleft + "px";
min.style.top = minTop + "px";
min.style.borderTop = "solid " + (this.width * 0.5 - minTop) + "px #09f";
min.style.borderBottomWidth = (this.width * 0.5 - minTop) + "px";
if (localStorage)
this.panel.appendChild(min);
//second hand
var sec = document.createElement("div"); //width:1px;height:1px;position:absolute;border:solid 0px transparent;left:199px;top:19px;border-top:solid 180px #333; border-bottom-width:180px;
var secWidth = 1;
var secTop = this.width * 0.05;
sec.style.width = secWidth + "px";
sec.style.height = secWidth + "px";
sec.style.position = "absolute";
sec.style.border = "solid 0px transparent";
sec.style.left = (this.width * 0.5 - secWidth) + "px";
sec.style.top = secTop + "px";
sec.style.borderTop = "solid " + (this.width * 0.5 - secTop) + "px " + this.foreColor;
sec.style.borderBottomWidth = (this.width * 0.5 - secTop) + "px";
if (localStorage)
this.panel.appendChild(sec);
//the center point
var point = document.createElement("div"); //content:"";background-color:#333;width:10px;height:10px;position:absolute;left:195px;top:195px;border-radius:50%;
var pointWidth = this.width * 0.05;
point.style.width = pointWidth + "px";
point.style.height = pointWidth + "px";
point.style.position = "absolute";
point.style.backgroundColor = this.foreColor;
point.style.left = this.width * 0.5 - (pointWidth * 0.5) + "px";
point.style.top = this.width * 0.5 - (pointWidth * 0.5) + "px";
point.style.borderRadius = "50%";
if (localStorage)
this.panel.appendChild(point);
//start the clock (the animation part)
this.loop = setInterval(function() {
const clocks = document.getElementsByClassName("clock1");
for (let clock of clocks) {
let timezone = clock.dataset.timezone;
var targetTime = new Date();
var tzDifference = parseInt(timezone) * 60 + targetTime.getTimezoneOffset();
var now = new Date(targetTime.getTime() + tzDifference * 60 * 1000);
label.innerHTML = dateTimeFormat(now);
var roS = 1.0 * 360 / 60 * now.getSeconds();
var roM = 1.0 * 360 / 60 * now.getMinutes();
var roH = 1.0 * 360 / 12 * (now.getHours() % 12) + 1.0 * 360 / 12 * (now.getMinutes() / 60);
sec.style.transform = 'rotate(' + roS + 'deg)';
min.style.transform = 'rotate(' + roM + 'deg)';
hour.style.transform = 'rotate(' + roH + 'deg)';
}
});
}
функция часов вызова
window.onload = analog();
function analog() {
const clocks = document.getElementsByClassName("clock1");
var d = 0;
for (let clock of clocks) {
let timezone = clock.dataset.timezone;
var targetTime = new Date();
var tzDifference = parseInt(timezone) * 60 + targetTime.getTimezoneOffset();
var date = new Date(targetTime.getTime() + tzDifference * 60 * 1000);
AnalogClock('clock' + d, {
width: 140,
bgColor: "#fff"
}, date);
d++;
}
}
код HTML часов
<?php
$clock = 0;
foreach( $cities as $city) {
$checktime = isValidTimezoneId(@$city['timezone']);
if ($checktime==1) {
$zoneoffset = new DateTime(@$city['timezone']);
?>
<div class="col-md-3 col-sm-4 col-xs-6" style=" border-bottom: 5px solid #eee; padding-top: 2%;">
<div class="col-md-12 col-sm-12 col-xs-12">
<h2 class="heading">
<img alt="<?php echo $city['country_name'];?>" style=" margin-bottom: -5px;" src="<?php echo base_url('uploads/flags/24x24/'.strtolower($city['country_code']).'.png')?>">
<a href="<?php echo base_url('time/'.$city['country_slug'].'/'.$city['city_slug']);?>">
<?php echo $city['city_name']?>
</a>
</h2>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<p>
<span class="clock1" id="clock<?php echo $clock;?>" data-timezone="<?php echo $zoneoffset->format('P');?>"></span></p>
</div>
</div>
<?php
$clock++;
}
}
?>
на этом img показывают одно и то же время в другом часовом поясе
при загрузке страницы отображаются разные даты и времени в зависимости от часовых поясов, когда код часов javascript запускается в режиме intreval, а затем отображается одинаковое время на всех часах