Показать сообщение отдельно
  #4 (permalink)  
Старый 16.01.2018, 13:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

время в разных городах 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>
Ответить с цитированием