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

时间：2015-05-28 15:44:22

标签： javascript jquery momentjs

我正在为我的公司建立内部网项目，还有一个世界时钟部分，显示美国，加拿大，英国，澳大利亚等主要世界时钟。

我已经使用moment.js + hero-face脚本完成了它，并在我的自定义后以此结束：

＆＃13;
＆＃13; 
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();
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

jsfiddle: World Clock #1

现在我想将此脚本转换为更智能，更少的线条和功能。 我最终得到了这个：

＆＃13;
＆＃13; 
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();
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

jsfiddle: World Clock #2

但是当你看到它不起作用时，计数器不像第一个脚本那样移动。

你能帮我修一下这个脚本以正确的方式运行吗？ 提前谢谢。

2 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

问题是元素子元素的选择器， 它现在通过改变：

完美地运作 
$(this).next('.hero-*')

是这样的：

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

感谢Scott Hunter提示。

相关问题
最新问题