【技巧】各国时间显示

来源：互联网发布：淘宝折扣秒杀群编辑：程序博客网时间：2024/06/01 23:51

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);

效果如下：

这里写图片描述

0 0