Как вывести время в разных городах?
Добрый день! Есть скрипт часов и вкладок для разных городов. Сейчас часы показывают московское время во вкладке для этого города. Подскажите, пожалуйста, как правильно вывести время для других городов, и подключить при выборе города/вкладки 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;
});
});
<style>#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;
}
</style>
<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>
|
LADYX,
http://geohelper.info/ru |
Dilettante_Pro,
Цитата:
|
время в разных городах c сохранением выбора
LADYX,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var obj = {timeZone:"Europe/Moscow"}, timer, tz = window.localStorage.getItem("tz") || 0;
function tic() {
var date = new Date;
$(".tik-tak-wrp-tab.active span").text(date.toLocaleTimeString("ru", obj));
timer = window.setTimeout(tic, 1000);
}
tic();
var tabs = $("#tik-tak-tabs .tik-tak-tab"), cont = $("#tik-tak-tabs .tik-tak-wrp-tab");
$("#tik-tak-tabs").on("click", ".tik-tak-tab", function() {
tabs.removeClass("active");
cont.removeClass("active");
var indx = $(this).index();
window.localStorage.setItem("tz",indx);
cont.eq(indx).addClass("active");
obj.timeZone = $(this).addClass("active").data("timezone");
window.clearTimeout(timer);
tic();
return false;
});
tabs.eq(tz).trigger("click");
});
</script>
</head>
<body>
<style>#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;
}
</style>
<div id="tik-tak-tabs">
<div class="tik-tak-select">
<span class="tik-tak-tab tik-tak-moscow" data-timeZone="Europe/Moscow">Москва</span>
<span class="tik-tak-tab tik-tak-london" data-timeZone="Europe/London">Лондон</span>
<span class="tik-tak-tab tik-tak-new_york" data-timeZone="America/New_York">Нью Йорк</span>
<span class="tik-tak-tab tik-tak-tokyo" data-timeZone="Asia/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>
</body>
</html>
|
рони,
да, супер! Огромное вам спасибо!!! |
рони,
ой, прошу прощения за глупый вопрос, конечно, скажите пожалуйста, а я смотрю, вы полностью изменили скрипт. И теперь он берет локальное время, а не серверное, или я что-то не понимаю? |
Цитата:
|
Цитата:
|
Вы путаете локальное время(время в определённой местности) и клиентское время(то что задано на компьютере пользователя). Javascript всегда берёт клиентское время, а уж какой часовой пояс выводить - уже дело параметров.
|
Aetae,
Ах вон оно что, теперь понятно. И по скрипту: я правильно понимаю, что этот скрипт любому пользователю, независимо от того, в каком часовом поясе он находится, будет показывать по умолчанию именно моск.время? А серверное время можно вывести только с помощью php, верно? |
LADYX, всё верно.
Из php само собой можно передать время в js, путём нехитрых математических манипуляций найти дельту и дальше использовать почти тот же самый скрипт, только с поправкой на эту дельту. Ну и если совсем параноить, предполагая у юзера севшую батарейку биоса и отсутствие обновления по ntp, можно дополнительно периодически синхронизировать с сервером.) |
Цитата:
|
Цитата:
|
Цитата:
|
Всем огромное спасибо. Теперь я немного понял для себя, что и как, картинка для меня стала ясна. Спасибо, удачи вам!
|
Прошу прощения за вновь поднятую тему, такой вопрос: скажите, пожалуйста, когда секунды тикают, и вместе сними тикает и курсор мыши, и например, если навести курсор на ссылку, то при первом же тиканье секунды, курсор сбивается. Это нельзя никаким способом устранить?
|
LADYX,
в коде нет никаких ссылок, а время перезаписывается, и на его копирование есть только 1 секунда. |
"Устранить" можно, но сложно - либо запоминать выделение перед обновлением и восстанавливать после, либо(не пробовал) работать с текст-нодами их методами.
|
Цитата:
да я знаю. Я имею ввиду любую ссылку на странице. Если навести на нее и оставить неподвижно, то курсор pointer и не сбивается. А когда часики на сайте выводишь, то первая блишайшая секунда, и курсор сбивается. Вот я о чем. |
Сбивается с чего на что?
В любом случае установите нужный cursor в css родителю и всё. |
Aetae,
вот смотрите, запустите, пожалуйста, скрипт. И наведите на любую ссылку на сайте, ну например на "Цитата выделенного", и ненадолго оставьте курсор на месте. И можно будет увидеть этот эффект. И также не запускайте скрипт, и также наведите на ту же ссылку и подержите курсор на месте. Курсор не будет сбиваться. |
Ничего нигде не сбивается. Какие-то глюки браузера, видимо.
Какой браузер то? |
Aetae,
опера 50.0 |
В хроме ничего не вижу, ставить оперу на домашний не буду.)
Снимите видео чтоль(напр CamStudio), посмотрим на эти чудеса. Или дождитесь того, кто сможет воспроизвести. |
Aetae,
курсор меняет стиль. |
laimas,
а так?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var obj = {timeZone:"Europe/Moscow"}, timer, tz = window.localStorage.getItem("tz") || 0;
function tic() {
var date = new Date;
$(".tik-tak-wrp-tab.active span").contents()[0].data = date.toLocaleTimeString("ru", obj);
timer = window.setTimeout(tic, 1000);
}
tic();
var tabs = $("#tik-tak-tabs .tik-tak-tab"), cont = $("#tik-tak-tabs .tik-tak-wrp-tab");
$("#tik-tak-tabs").on("click", ".tik-tak-tab", function() {
tabs.removeClass("active");
cont.removeClass("active");
var indx = $(this).index();
window.localStorage.setItem("tz",indx);
cont.eq(indx).addClass("active");
obj.timeZone = $(this).addClass("active").data("timezone");
window.clearTimeout(timer);
tic();
return false;
});
tabs.eq(tz).trigger("click");
});
</script>
</head>
<body>
<style>#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;
}
</style>
<div id="tik-tak-tabs">
<div class="tik-tak-select">
<span class="tik-tak-tab tik-tak-moscow" data-timeZone="Europe/Moscow">Москва</span>
<span class="tik-tak-tab tik-tak-london" data-timeZone="Europe/London">Лондон</span>
<span class="tik-tak-tab tik-tak-new_york" data-timeZone="America/New_York">Нью Йорк</span>
<span class="tik-tak-tab tik-tak-tokyo" data-timeZone="Asia/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>
</body>
</html>
|
Норма
|
А у меня нет, не поменялось, курсор сбивается
|
Цитата:
|
рони,
и правда, проверял сразу как увидел код - без проблем, теперь же курсор опять меняет стиль с pointer на default. |
Цитата:
|
С какого хрена вообще фрейм влияет на отображение в родителе. Если у вас это происходит, наверное стоит таки открыть баг?
|
Aetae,
в смысле? ничего не понял |
LADYX, Aetae, вероятно, о bug tracker'е браузера говорит.
|
| Часовой пояс GMT +3, время: 22:38. |