HTML代码如下:
<div class="time">
<div class="tmInfo">
<ul>
<li>
<img src="/img/main/luoshanji.png">
<p>
洛杉矶
<br>
<span data-tzone="-8" data-offset-date="[["03 13,2016 02:00:00","11 06,2016"]]" 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="[["03 13,2016 02:00:00","11 06,2016"]]" 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="[["03 13,2016 02:00:00","11 06,2016"]]" 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="[["03 27,2016 01:00:00","10 30,2016"]]" 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="[["03 27,2016 01:00:00","10 30,2016"]]" 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);
效果如下: