Как вывести время в разных городах?

438
17 января 2018, 18:55

Добрый день! Есть скрипт часов и вкладок для разных городов. Сейчас часы показывают московское время во вкладке для этого города. Подскажите, пожалуйста, как правильно вывести время для других городов, и подключить при выборе города/вкладки 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>

Answer 1

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 сдвиги для разных гордов

READ ALSO
Трансляция с нескольких веб камер на сайт

Трансляция с нескольких веб камер на сайт

Добрый деньПоявилась необходимость транслировать видеопоток с нескольких веб камер на сайт

300
Как обратиться к элементу в popup расширения?

Как обратиться к элементу в popup расширения?

Всем привет! Изучаю создание расширения для Гугл и не могу понять, почему скрипт не может найти элемент во всплывающем окне, которое появляется...

344
vk.com - как отключить преобразование ссылок в сообщениях?

vk.com - как отключить преобразование ссылок в сообщениях?

Речь идёт о моменте, когда любую ссылку вк преобразовывает в подобие vkcom/away?блаблабла

403
JS таймаут между click и dbckick эвентами

JS таймаут между click и dbckick эвентами

Приветы, как сделать чтобы был таймаут между паузой видео и его переходом в фулл скрин?В инете нашел только JQuery и там реализовано вообще не так,...

286