<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="time-container">
<div class="container">
<div class="times-wrapper clearfix">
<i class="icon-time icon-clock"></i>
<i class="icon-time icon-earth"></i>
<div class="time-city-wrapper" id="timeInformer1">
<p class="city"></p>
<p class="city-time"></p>
</div>
<div class="time-city-wrapper" id="timeInformer2">
<p class="city"></p>
<p class="city-time"></p>
</div>
<div class="time-city-wrapper" id="timeInformer3">
<p class="city"></p>
<p class="city-time"></p>
</div>
<div class="time-city-wrapper" id="timeInformer4">
<p class="city"></p>
<p class="city-time"></p>
</div>
</div>
</div>
</div>
<div class="last-section"></div>
.time-container {
background: @timeBg;
height: 44px;
padding-top: 7px;
.box-sizing;
.times-wrapper {
display: inline-block;
width: auto;
margin-left: 373px;
}
.icon-time {
display: block;
height: 29px;
width: 29px;
float: left;
}
.icon-clock {
background: @clockIcon;
margin-right: 10px;
}
.icon-earth {
background: @earthIcon;
margin-right: 5px;
}
.time-city-wrapper {
display: block;
float: left;
.box-sizing;
line-height: 30px;
&:after {
content: @timeDelimeter;
width: 2px;
height: 10px;
}
&:last-child:after {
content: "";
}
}
p {
margin: 0;
}
.city {
display: inline-block;
color: #61656e;
font-size: 12px;
font-family: @renault;
padding-right: 8px;
padding-left: 13px;
}
.city-time {
font-family: @renault;
display: inline-block;
color: #28deff;
padding-right: 11px;
}
}
var timeInformer = (function () {
var date = null,
data = {},
informersCount = 4;
return {
initInformer: function () {
timeInformer.initDate();
for (var i = 0; i < informersCount; i++) {
timeInformer.initElements(data[i].GMT, i);
}
},
setData: function(response) {
data = response;
},
initDate: function () {
date = moment(new Date()).utc();
},
update: function () {
date = moment(new Date()).utc();
for (var i = 0; i < informersCount; i++) {
timeInformer.updateElements(data[i].GMT, i);
}
},
initElements: function (gmt, i) {
$('#timeInformer' + (i + 1) + ' .city').html(data[i].Title);
$('#timeInformer' + (i + 1) + ' .city-time').html(date.add(gmt, 'h').format('HH:mm:ss'));
date.add(-(gmt), 'h');
},
updateElements: function (gmt, i) {
$('#timeInformer' + (i + 1) + ' .city-time').html(date.add(gmt, 'h').format('HH:mm:ss'));
date.add(-(gmt), 'h');
}
}
})();
$(document).ready(function () {
getInformers().then(function (response) {
timeInformer.setData(response);
timeInformer.initInformer();
setInterval(updateTimeInformers, 1000);
});
function getInformers() {
return $.get('/main/gettimeinformers');
}
function updateTimeInformers() {
timeInformer.update();
}
});
