Просмотр полной версии : Как вывести время в разных городах?
Добрый день! Есть скрипт часов и вкладок для разных городов. Сейчас часы показывают московское время во вкладке для этого города. Подскажите, пожалуйста, как правильно вывести время для других городов, и подключить при выборе города/вкладки 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>
Dilettante_Pro
16.01.2018, 12:18
LADYX,
http://geohelper.info/ru
Dilettante_Pro,
LADYX,
http://geohelper.info/ru
нет, мне не нужен этот сервис
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, можно дополнительно периодически синхронизировать с сервером.)
А серверное время можно вывести только с помощью php, верно?
Отдавать время сервера нет необходимости, а вот смещение часового пояса сервера можно отдать клиенту. А так как у сервера оно имеет противоположный относительно клиента знак, то можно получить разницу на которую корректировать время клиента.
Отдавать время сервера нет необходимости
Моя телепатия, увы, не так сильна, так что поверю тебе на слово.
Моя телепатия, увы, не так сильна
Да я тоже не экстрасенс )
Всем огромное спасибо. Теперь я немного понял для себя, что и как, картинка для меня стала ясна. Спасибо, удачи вам!
Прошу прощения за вновь поднятую тему, такой вопрос: скажите, пожалуйста, когда секунды тикают, и вместе сними тикает и курсор мыши, и например, если навести курсор на ссылку, то при первом же тиканье секунды, курсор сбивается. Это нельзя никаким способом устранить?
LADYX,
в коде нет никаких ссылок, а время перезаписывается, и на его копирование есть только 1 секунда.
"Устранить" можно, но сложно - либо запоминать выделение перед обновлением и восстанавливать после, либо(не пробовал) работать с текст-нодами их методами.
LADYX,
в коде нет никаких ссылок
рони,
да я знаю. Я имею ввиду любую ссылку на странице. Если навести на нее и оставить неподвижно, то курсор pointer и не сбивается. А когда часики на сайте выводишь, то первая блишайшая секунда, и курсор сбивается. Вот я о чем.
Сбивается с чего на что?
В любом случае установите нужный cursor в css родителю и всё.
Aetae,
вот смотрите, запустите, пожалуйста, скрипт. И наведите на любую ссылку на сайте, ну например на "Цитата выделенного", и ненадолго оставьте курсор на месте. И можно будет увидеть этот эффект.
И также не запускайте скрипт, и также наведите на ту же ссылку и подержите курсор на месте. Курсор не будет сбиваться.
Ничего нигде не сбивается. Какие-то глюки браузера, видимо.
Какой браузер то?
В хроме ничего не вижу, ставить оперу на домашний не буду.)
Снимите видео чтоль(напр 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'е браузера говорит.
vBulletin® v3.6.7, Copyright ©2000-2025, Jelsoft Enterprises Ltd. Перевод: zCarot