【技巧】各国时间显示

HTML代码如下：

<div class="time">
    <div class="tmInfo">
        <ul>
            <li>
                <img src="/img/main/luoshanji.png">
                <p>
                    洛杉矶
                    <br>
                    <span data-tzone="-8" data-offset-date="[[&quot;03 13,2016 02:00:00&quot;,&quot;11 06,2016&quot;]]" data-offset="1">18:28:57</span>
                </p>
            </li>
            <li>
                <img src="/img/main/luoshanji.png">
                <p>
                    新泽西
                    <br>
                    <span data-tzone="-5" data-offset-date="[[&quot;03 13,2016 02:00:00&quot;,&quot;11 06,2016&quot;]]" data-offset="1">21:28:57</span>
                </p>
            </li>
            <li>
                <img src="/img/main/duolunduo.png">
                <p>
                    多伦多
                    <br>
                    <span data-tzone="-5" data-offset-date="[[&quot;03 13,2016 02:00:00&quot;,&quot;11 06,2016&quot;]]" data-offset="1">21:28:57</span>
                </p>
            </li>
            <li>
                <img src="/img/main/bominghan.png">
                <p>
                    曼切斯特
                    <br>
                    <span data-tzone="0" data-offset-date="[[&quot;03 27,2016 01:00:00&quot;,&quot;10 30,2016&quot;]]" data-offset="1">2:28:57</span>
                </p>
            </li>
            <li>
                <img src="/img/main/bolin.png">
                <p>
                    柏林
                    <br>
                    <span data-tzone="+1" data-offset-date="[[&quot;03 27,2016 01:00:00&quot;,&quot;10 30,2016&quot;]]" data-offset="1">3:28:57</span>
                </p>
            </li>
            <li>
                <img src="/img/main/shenzhen.png">
                <p>
                    深圳
                    <br>
                    <span data-tzone="+8">10:28:57</span>
                </p>
            </li>
        </ul>
    </div>
</div>

CSS代码如下：

/*各国家时间*/
.time{
    width: 100%;
    background: #302E2F;
}
.time .tmInfo{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
.time .tmInfo ul li{
    display: inline-block;
    color: #fff;
    white-space: nowrap;
    line-height: 36px;
    margin: 0 30px;
    text-align: left;
}
.time .tmInfo ul li img{
    margin-right: 10px;
    vertical-align: middle;
}
.time .tmInfo ul li p{
    margin-bottom: 0;
    display: inline-block;
    line-height: 18px;
    vertical-align: middle;
}
.time .tmInfo ul li p span{
    color: #fff;
}
.time .tmInfo ul{
    padding: 20px 0;
    text-align: center;
}

JS代码如下：

/*各国时间*/
(function(win, $) {
    var tzone = function(os, ds) {
        this.datetime = new Date(); // datetime
        this.offset = os; // GMT offset
        this.getDateTime=function(){
            var datetime=new Date(this.datetime.getTime() + this.offset * 3600 * 1000);
            return datetime;
        }
        this.toString = function() {
            var datetime=this.getDateTime()
            var hour = datetime.getUTCHours();
            var minute = datetime.getUTCMinutes();
            var second = datetime.getUTCSeconds();
            return hour + ':' + minute + ':' + second;
        }
    }

    var updateClocks = function() {
        $('[data-tzone]').each(function(key,el){
            var $el=$(el);
            var _tzone=parseInt($el.data('tzone'));

            var ots=$el.data('offset-date');
            var offset=parseInt($el.data('offset'));
            if(ots && offset){
                for (var key in ots) {
                    var item=ots[key];
                    var of=_tzone * 3600 * 1000;
                    var time=(new Date()).getTime() + of;
                    var start=(new Date(item[0])).getTime() + of;
                    var end=(new Date(item[1])).getTime() + of;
                    if(time>start && time<end && offset){
                        _tzone=_tzone+offset;
                    }
                }
            }

            var t=new tzone(_tzone,1);
            $el.html(t.toString());
        });
        window.setTimeout(function() {
            updateClocks();
        }, 1001);
    }
    $(function() {
        updateClocks();
    });
})(window, jQuery);

效果如下：