moment.js несколько встроенных часов, используя одну функцию

Я строию проект интрасети для своей компании, и есть раздел для мировых часов, в котором отображаются основные мировые часы, такие как США, Канада, Великобритания, Австралия ... и т. Д.moment.js несколько встроенных часов, используя одну функцию

Я закончил его с помощью moment.js + сценарий героя-лица, и закончилось это после моей настройки:

var nightStart = 18, 
 
    nightEnd = 6; 
 
    
 
function updateClockUK() { 
 
    var now = moment().tz("Europe/London"), 
 
     second = now.seconds() * 6, 
 
     minute = now.minutes() * 6 + second/60, 
 
     hour = ((now.hours() % 12)/12) * 360 + 90 + minute/12; 
 

 
    if (now.hours() >= nightStart | now.hours() < nightEnd) { 
 
     $('#hero-uk').addClass("hero-night"); 
 
    } 
 
    $('#hour-uk').css("transform", "rotate(" + hour + "deg)"); 
 
    $('#minute-uk').css("transform", "rotate(" + minute + "deg)"); 
 
    $('#second-uk').css("transform", "rotate(" + second + "deg)"); 
 
} 
 

 
function updateClockUS() { 
 
    var now = moment().tz("America/Los_Angeles"), 
 
     second = now.seconds() * 6, 
 
     minute = now.minutes() * 6 + second/60, 
 
     hour = ((now.hours() % 12)/12) * 360 + 90 + minute/12; 
 

 
    if (now.hours() >= nightStart | now.hours() < nightEnd) { 
 
     $('#hero-us').addClass("hero-night"); 
 
    } 
 
    $('#hour-us').css("transform", "rotate(" + hour + "deg)"); 
 
    $('#minute-us').css("transform", "rotate(" + minute + "deg)"); 
 
    $('#second-us').css("transform", "rotate(" + second + "deg)"); 
 
} 
 

 
function updateClockCA() { 
 
    var now = moment().tz("Canada/Eastern"), 
 
     second = now.seconds() * 6, 
 
     minute = now.minutes() * 6 + second/60, 
 
     hour = ((now.hours() % 12)/12) * 360 + 90 + minute/12; 
 

 
    if (now.hours() >= nightStart | now.hours() < nightEnd) { 
 
     $('#hero-ca').addClass("hero-night"); 
 
    } 
 
    $('#hour-ca').css("transform", "rotate(" + hour + "deg)"); 
 
    $('#minute-ca').css("transform", "rotate(" + minute + "deg)"); 
 
    $('#second-ca').css("transform", "rotate(" + second + "deg)"); 
 
} 
 

 
function updateClockSA() { 
 
    var now = moment().tz("Asia/Riyadh"), 
 
     second = now.seconds() * 6, 
 
     minute = now.minutes() * 6 + second/60, 
 
     hour = ((now.hours() % 12)/12) * 360 + 90 + minute/12; 
 

 
    if (now.hours() >= nightStart | now.hours() < nightEnd) { 
 
     $('#hero-sa').addClass("hero-night"); 
 
    } 
 
    $('#hour-sa').css("transform", "rotate(" + hour + "deg)"); 
 
    $('#minute-sa').css("transform", "rotate(" + minute + "deg)"); 
 
    $('#second-sa').css("transform", "rotate(" + second + "deg)"); 
 
} 
 

 
function updateClockAU() { 
 
    var now = moment().tz("Australia/Brisbane"), 
 
     second = now.seconds() * 6, 
 
     minute = now.minutes() * 6 + second/60, 
 
     hour = ((now.hours() % 12)/12) * 360 + 90 + minute/12; 
 

 
    if (now.hours() >= nightStart | now.hours() < nightEnd) { 
 
     $('#hero-au').addClass("hero-night"); 
 
    } 
 
    $('#hour-au').css("transform", "rotate(" + hour + "deg)"); 
 
    $('#minute-au').css("transform", "rotate(" + minute + "deg)"); 
 
    $('#second-au').css("transform", "rotate(" + second + "deg)"); 
 
} 
 

 
function updateClockNZ() { 
 
    var now = moment().tz("Pacific/Auckland"), 
 
     second = now.seconds() * 6, 
 
     minute = now.minutes() * 6 + second/60, 
 
     hour = ((now.hours() % 12)/12) * 360 + 90 + minute/12; 
 

 
    if (now.hours() >= nightStart | now.hours() < nightEnd) { 
 
     $('#hero-nz').addClass("hero-night"); 
 
    } 
 
    $('#hour-nz').css("transform", "rotate(" + hour + "deg)"); 
 
    $('#minute-nz').css("transform", "rotate(" + minute + "deg)"); 
 
    $('#second-nz').css("transform", "rotate(" + second + "deg)"); 
 
} 
 

 
function timedUpdate() { 
 
    updateClockUK(); 
 
    updateClockUS(); 
 
    updateClockCA(); 
 
    updateClockSA(); 
 
    updateClockAU(); 
 
    updateClockNZ(); 
 
    setTimeout(timedUpdate, 1000); 
 
} 
 

 
timedUpdate();

.hero-circle { 
 
    width:60px; 
 
    height:60px; 
 
    position:relative; 
 
    margin: 0 auto; 
 
    border:3.5px solid #F39C12; 
 
    border-radius:50%; 
 
    box-shadow:0 1px 3.5px rgba(34, 34, 34, 0.3), inset 0 1px 3.5px rgba(34, 34, 34, 0.3); 
 
} 
 
.hero-night { 
 
    background-color: #805209; 
 
} 
 
.hero-face { 
 
    width:100%; 
 
    height:100%; 
 
} 
 
.hero-face:after { 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    width:5px; 
 
    height:5px; 
 
    margin:-2.5px 0 0 -2.5px; 
 
    background:#F39C12; 
 
    border-radius:2.5px; 
 
    content:""; 
 
    display:block; 
 
} 
 
.hero-hour { 
 
    width:0; 
 
    height:0; 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    margin:-2px 0 -2px -25%; 
 
    padding:2px 0 2px 25%; 
 
    background:#F39C12; 
 
    -webkit-transform-origin:100% 50%; 
 
    -ms-transform-origin:100% 50%; 
 
    transform-origin:100% 50%; 
 
    border-radius:2px 0 0 2px; 
 
} 
 
.hero-minute { 
 
    width:0; 
 
    height:0; 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    margin:-40% -1.25px 0; 
 
    padding:40% 1.25px 0; 
 
    background:#F39C12; 
 
    -webkit-transform-origin:50% 100%; 
 
    -ms-transform-origin:50% 100%; 
 
    transform-origin:50% 100%; 
 
    border-radius:1.25px 1.25px 0 0; 
 
} 
 
.hero-second { 
 
    width:0; 
 
    height:0; 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    margin:-40% -0.5px 0 0; 
 
    padding:40% 0.5px 0; 
 
    background:#F39C12; 
 
    -webkit-transform-origin:50% 100%; 
 
    -ms-transform-origin:50% 100%; 
 
    transform-origin:50% 100%; 
 
} 
 
.hero-title { 
 
    text-align:center; 
 
    font:14pt #000 bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://raw.githubusercontent.com/timrwood/moment/2.10.3/moment.js"></script> 
 
<script src="http://momentjs.com/downloads/moment-timezone-with-data.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-xs-4"> 
 
     <div id="hero-uk" class="hero-circle"> 
 
      <div class="hero-face"> 
 
       <div id="hour-uk" class="hero-hour"></div> 
 
       <div id="minute-uk" class="hero-minute"></div> 
 
       <div id="second-uk" class="hero-second"></div> 
 
      </div> 
 
     </div> 
 
     <!-- Message title and timestamp --> 
 
     <div class="hero-title">UK</div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div id="hero-us" class="hero-circle"> 
 
      <div class="hero-face"> 
 
       <div id="hour-us" class="hero-hour"></div> 
 
       <div id="minute-us" class="hero-minute"></div> 
 
       <div id="second-us" class="hero-second"></div> 
 
      </div> 
 
     </div> 
 
     <!-- Message title and timestamp --> 
 
     <div class="hero-title">USA</div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div id="hero-ca" class="hero-circle"> 
 
      <div class="hero-face"> 
 
       <div id="hour-ca" class="hero-hour"></div> 
 
       <div id="minute-ca" class="hero-minute"></div> 
 
       <div id="second-ca" class="hero-second"></div> 
 
      </div> 
 
     </div> 
 
     <!-- Message title and timestamp --> 
 
     <div class="hero-title">Canada</div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div id="hero-sa" class="hero-circle"> 
 
      <div class="hero-face"> 
 
       <div id="hour-sa" class="hero-hour"></div> 
 
       <div id="minute-sa" class="hero-minute"></div> 
 
       <div id="second-sa" class="hero-second"></div> 
 
      </div> 
 
     </div> 
 
     <!-- Message title and timestamp --> 
 
     <div class="hero-title">KSA</div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div id="hero-au" class="hero-circle"> 
 
      <div class="hero-face"> 
 
       <div id="hour-au" class="hero-hour"></div> 
 
       <div id="minute-au" class="hero-minute"></div> 
 
       <div id="second-au" class="hero-second"></div> 
 
      </div> 
 
     </div> 
 
     <!-- Message title and timestamp --> 
 
     <div class="hero-title">Australia</div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div id="hero-nz" class="hero-circle"> 
 
      <div class="hero-face"> 
 
       <div id="hour-nz" class="hero-hour"></div> 
 
       <div id="minute-nz" class="hero-minute"></div> 
 
       <div id="second-nz" class="hero-second"></div> 
 
      </div> 
 
     </div> 
 
     <!-- Message title and timestamp --> 
 
     <div class="hero-title">New Zealand</div> 
 
    </div> 
 
</div>

jsfiddle: World Clock #1

Теперь я хочу, чтобы преобразовать это сценарий - умнее и меньше линий и функций. я закончил с этим:

var nightStart = 18, 
 
    nightEnd = 6; 
 

 
function updateClock() { 
 
    var hero_tz = $(this).data("timezone"), 
 
     now = moment().tz(hero_tz), 
 
     second = now.seconds() * 6, 
 
     minute = now.minutes() * 6 + second/60, 
 
     hour = ((now.hours() % 12)/12) * 360 + 90 + minute/12; 
 

 
    if (now.hours() >= nightStart | now.hours() < nightEnd) { 
 
     $(this).addClass("hero-night"); 
 
    } 
 
    $(this).next('.hero-hour').css("transform", "rotate(" + hour + "deg)"); 
 
    $(this).next('.hero-minute').css("transform", "rotate(" + minute + "deg)"); 
 
    $(this).next('.hero-second').css("transform", "rotate(" + second + "deg)"); 
 
} 
 

 
function timedUpdate() { 
 
    $(".hero-circle").each(updateClock); 
 
    setTimeout(timedUpdate, 1000); 
 
} 
 

 
timedUpdate();

.hero-circle { 
 
    width:60px; 
 
    height:60px; 
 
    position:relative; 
 
    margin: 0 auto; 
 
    border:3.5px solid #F39C12; 
 
    border-radius:50%; 
 
    box-shadow:0 1px 3.5px rgba(34, 34, 34, 0.3), inset 0 1px 3.5px rgba(34, 34, 34, 0.3); 
 
} 
 
.hero-night { 
 
    background-color: #805209; 
 
} 
 
.hero-face { 
 
    width:100%; 
 
    height:100%; 
 
} 
 
.hero-face:after { 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    width:5px; 
 
    height:5px; 
 
    margin:-2.5px 0 0 -2.5px; 
 
    background:#F39C12; 
 
    border-radius:2.5px; 
 
    content:""; 
 
    display:block; 
 
} 
 
.hero-hour { 
 
    width:0; 
 
    height:0; 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    margin:-2px 0 -2px -25%; 
 
    padding:2px 0 2px 25%; 
 
    background:#F39C12; 
 
    -webkit-transform-origin:100% 50%; 
 
    -ms-transform-origin:100% 50%; 
 
    transform-origin:100% 50%; 
 
    border-radius:2px 0 0 2px; 
 
} 
 
.hero-minute { 
 
    width:0; 
 
    height:0; 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    margin:-40% -1.25px 0; 
 
    padding:40% 1.25px 0; 
 
    background:#F39C12; 
 
    -webkit-transform-origin:50% 100%; 
 
    -ms-transform-origin:50% 100%; 
 
    transform-origin:50% 100%; 
 
    border-radius:1.25px 1.25px 0 0; 
 
} 
 
.hero-second { 
 
    width:0; 
 
    height:0; 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    margin:-40% -0.5px 0 0; 
 
    padding:40% 0.5px 0; 
 
    background:#F39C12; 
 
    -webkit-transform-origin:50% 100%; 
 
    -ms-transform-origin:50% 100%; 
 
    transform-origin:50% 100%; 
 
} 
 
.hero-title { 
 
    text-align:center; 
 
    font:14pt #000 bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://raw.githubusercontent.com/timrwood/moment/2.10.3/moment.js"></script> 
 
<script src="http://momentjs.com/downloads/moment-timezone-with-data.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-md-2 col-sm-3 col-xs-4"> 
 
     <div class="hero-circle" data-timezone="America/Los_Angeles"> 
 
      <div class="hero-face"> 
 
       <div class="hero-hour"></div> 
 
       <div class="hero-minute"></div> 
 
       <div class="hero-second"></div> 
 
      </div> 
 
     </div> 
 
     <!-- Clock title --> 
 
     <div class="hero-title">America, Los Angeles</div> 
 
    </div> 
 
    <div class="col-md-2 col-sm-3 col-xs-4"> 
 
     <div class="hero-circle" data-timezone="Europe/London"> 
 
      <div class="hero-face"> 
 
       <div class="hero-hour"></div> 
 
       <div class="hero-minute"></div> 
 
       <div class="hero-second"></div> 
 
      </div> 
 
     </div> 
 
     <!-- Clock title --> 
 
     <div class="hero-title">Europe, London</div> 
 
    </div> 
 
</div>

jsfiddle: World Clock #2

Но, как вы видите, что это не работает, счетчики не движется, как первый сценарий.

Не могли бы вы помочь мне исправить этот сценарий, чтобы он работал надлежащим образом? Спасибо заранее.

источник

2015-05-28 Yasser Lotfy

Пожалуйста, объясните, каким образом он не работает. –

Если вы видите, что первые скриптовые часы работают и против часовой стрелки обновляются каждую секунду, но второй скрипт не работает. –

Пожалуйста, объясните, каким образом второй скрипт не работает. –

Проблема была селектор дочерних элементов, Он теперь работает за счет изменения:

$(this).next('.hero-*')

быть похожим на это:

$(this).find('.hero-*')

Благодаря Scott Hunter за подсказку.

источник

2015-05-28 20:29:15

Я поделюсь своим кодом на Github, который скоро будет доступен для всех. Спасибо за помощь ... –

В вашем сценарии заменить $(this).next() на $(this).first().

источник

2015-05-28 16:38:05

Спасибо за подсказку. Проблема была в селекторе. –

moment.js несколько встроенных часов, используя одну функцию

ответ

Смежные вопросы