moment.js 使用一个函数的多个实时时钟

Question

我正在为我的公司构建 Intranet 项目，并且有一个世界时钟部分显示主要世界时钟，如美国、加拿大、英国、澳大利亚...等

我是用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

但是如您所见，它不起作用，计数器不像第一个脚本那样移动。

你能帮我把这个脚本以正确的方式修复到运行吗？提前致谢。

Answer 1

在您的脚本中，将 $(this).next() 替换为 $(this).first()。

Answer 2

问题出在子元素的选择器上，它现在通过更改完美运行：

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

变成这样：

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

感谢 Scott Hunter 的提示。

moment.js 使用一个函数的多个实时时钟

moment.js multiple live clocks using one function

javascript

jquery

momentjs