"time informer"
Bootstrap 3.3.0 Snippet by irinashuvalova

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

Related: See More


Questions / Comments: