Добрый день! Есть скрипт часов и вкладок для разных городов. Сейчас часы показывают московское время во вкладке для этого города. Подскажите, пожалуйста, как правильно вывести время для других городов, и подключить при выборе города/вкладки Cookie? jQuery Cookie Plugin v1.4.1 (http://plugins.jquery.com/cookie/) к сайту подключен. Спасибо!
var moskowUtc = 3;
var timerId = setInterval(function() {
let t = new Date(),
tt = t.getUTCHours() + moskowUtc;
document.getElementById('tik-tak-moscow').innerHTML = (tt > 24 ? "0" : "") + (tt > 24 ? tt - 24 : tt) + ":" + (t.getMinutes() < 10 ? '0' : '') + t.getMinutes() + ":" + (t.getSeconds() < 10 ? '0' : '') + t.getSeconds();
document.getElementById('tik-tak-moscow').classList.add("step");
}, 1000);
$(function() {
$("#tik-tak-tabs").on("click", ".tik-tak-tab", function() {
var tabs = $("#tik-tak-tabs .tik-tak-tab"),
cont = $("#tik-tak-tabs .tik-tak-wrp-tab");
tabs.removeClass("active");
cont.removeClass("active");
$(this).addClass("active");
cont.eq($(this).index()).addClass("active");
return false;
});
});
#tik-tak-tabs .tik-tak-select>span {
display: inline-block;
margin: 0 10px 30px 0;
cursor: pointer;
}
#tik-tak-tabs .tik-tak-wrp .tik-tak-wrp-tab>i {
display: block;
margin-top: 2px;
}
#tik-tak-tabs .tik-tak-wrp .tik-tak-wrp-tab {
display: none;
}
#tik-tak-tabs .tik-tak-wrp .tik-tak-wrp-tab.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tik-tak-tabs">
<div class="tik-tak-select">
<span class="tik-tak-tab tik-tak-moscow">Москва</span>
<span class="tik-tak-tab tik-tak-london">Лондон</span>
<span class="tik-tak-tab tik-tak-new_york">Нью Йорк</span>
<span class="tik-tak-tab tik-tak-tokyo">Токио</span>
</div>
<div class="tik-tak-wrp">
<div class="tik-tak-wrp-tab active"><span id="tik-tak-moscow"></span><i>Москва</i></div>
<div class="tik-tak-wrp-tab"><span id="tik-tak-london"></span><i>Лондон</i></div>
<div class="tik-tak-wrp-tab"><span id="tik-tak-new_york"></span><i>Нью Йорк</i></div>
<div class="tik-tak-wrp-tab"><span id="tik-tak-tokyo"></span><i>Токио</i></div>
</div>
</div>
let timerId = function(city, utcOffset) {
setInterval(function() {
let t = new Date(),
tt = t.getUTCHours() + utcOffset,
eid = 'tik-tak-' + city;
document.getElementById(eid).innerHTML = (tt < 10 ? "0" : "") + (tt > 24 ? tt - 24 : tt) + ":" + (t.getMinutes() < 10 ? '0' : '') + t.getMinutes() + ":" + (t.getSeconds() < 10 ? '0' : '') + t.getSeconds();
}, 1000);
};
$(function() {
$("#tik-tak-tabs").on("click", ".tik-tak-tab", function() {
var tabs = $("#tik-tak-tabs .tik-tak-tab"),
cont = $("#tik-tak-tabs .tik-tak-wrp-tab");
tabs.removeClass("active");
cont.removeClass("active");
$(this).addClass("active");
cont.eq($(this).index()).addClass("active");
return false;
});
});
document.onload = timerId('moscow', 3); // id="tik-tak-moscow"; utc offset = 3
document.onload = timerId('london', 0);
document.onload = timerId('new_york', -5);
document.onload = timerId('tokyo', 9);
document.onload = function() {
let aTab = localStorage.getItem('activeSome');
document.getElementById(aTab).classList.add('active');
};
let tiktak = document.getElementsByClassName('tik-tak-select')[0];
tiktak.addEventListener('click', function() {
localStorage.setItem('activeSome',event.target.id);
});
#tik-tak-tabs .tik-tak-select>span {
display: inline-block;
margin: 0 10px 30px 0;
cursor: pointer;
}
#tik-tak-tabs .tik-tak-wrp .tik-tak-wrp-tab>i {
display: block;
margin-top: 2px;
}
#tik-tak-tabs .tik-tak-wrp .tik-tak-wrp-tab {
display: none;
}
#tik-tak-tabs .tik-tak-wrp .tik-tak-wrp-tab.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tik-tak-tabs">
<div class="tik-tak-select">
<span id="tik-moscow" class="tik-tak-tab">Москва</span>
<span id="tik-london" class="tik-tak-tab">Лондон</span>
<span id="tik-new_york" class="tik-tak-tab">Нью Йорк</span>
<span id="tik-tokyo" class="tik-tak-tab">Токио</span>
</div>
<div class="tik-tak-wrp">
<div class="tik-tak-wrp-tab active"><span id="tik-tak-moscow"></span></div>
<div class="tik-tak-wrp-tab"><span id="tik-tak-london"></span></div>
<div class="tik-tak-wrp-tab"><span id="tik-tak-new_york"></span></div>
<div class="tik-tak-wrp-tab"><span id="tik-tak-tokyo"></span></div>
</div>
</div>
UTC сдвиги для разных гордов
Сборка персонального компьютера от Artline: умный выбор для современных пользователей