Bootstrap Snippet clock widget using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="clock-widget" id="clockWidgetApp">
    <h3 class="clock-widget__time" 
        @mouseenter="mouseEnter" 
        @mouseleave="mouseLeave"
        @click="onClick">{{currentTime}}</h3>
    <div class="clock-widget__timezones" 
         v-show="isVisible" >
        <h3 class="clock-widget__timezones-title">Часовые пояса<i class="close-timezone"></i></h3>
        <ul class="timezone-items">
            <timezone-item v-for="item in timeZoneCities"
                           :timezonecity="item"
                           :currentcity="currentCity"
                           :key="item.ID"></timezone-item>
        </ul>
    </div>
</div>
<script type="text/x-template" id="timezone-item-template" style="display: none">
    <li :class="{ timezone-item ,}">
        <span class="timezone-item__title">{{timezonecity.Title}}</span>
        <span class="timezone-item__time">{{cityTime}}</span>
        <span class="timezone-item__gmt">MSK{{gmtDifference}} (UTC {{timezonecity.GMT}})</span>
    </li>
</script>
<script>
    (function (webPartId, initialState) {
        new ClockWidget({
            el: '#clockWidgetApp',
            data: function () {
                return {
                    timeZoneCities: initialState.TimeZoneCities || [],
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.clock-widget {
    position: relative;
    margin-left: 66px;
    @media (max-width: (@screenTablet - 1) ) {
        float: right;
        padding-right: 46px;
    }
}
.clock-widget__time {
    display: inline-block;
    font-family: 'HelveticaNeueCyrThin';
    font-size: 30px;
    line-height: 1;
    color: @darkGray;
    margin: 0;
    padding-left: 39px;
    background: @clockLgIcon 0 50%;
}
.clock-widget__timezones {
    position: absolute;
    top: 45px;
    left: 0;
    border-radius: 4px;
    box-shadow: 0px 0px 19px 1px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    width: 470px;
    background-color: @white;
    padding: 20px 35px 5px;
    .box-sizing;
}
.clock-widget__timezones-title {
    color: @darkGray;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import Vue from 'Vue';
Vue.component('timezone-item', {
    props: ['timezonecity', 'currentcity'],
    template: '#timezone-item-template',
    data: function () {
        return {
            cityTime: moment(new Date()).utc().add(this.timezonecity.GMT, 'h').format('HH:mm')
        }
    },
    mounted() {
        setInterval(this.updateDateTime, 1000);
    },
    methods: {
        updateDateTime() {
            this.cityTime = moment(new Date()).utc().add(this.timezonecity.GMT, 'h').format('HH:mm');
        }
    },
    computed: {
        gmtDifference: function () {
            return this.timezonecity.GMT - 3 != 0 ? this.timezonecity.GMT - 3 > 0 ? "+" + (this.timezonecity.GMT - 3) : "" + (this.timezonecity.GMT - 3) : "";
        }
    }
})
ClockWidget = Vue.extend({
    name: 'ClockWidget',
    data() {
        return {
            timeZoneCities: [],
            currentCity: "Москва",
            currentTime: moment(new Date()).format('HH:mm'),
            isVisible: false,
            isClicked: false
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"clock widget"
Bootstrap 3.0.0 Snippet by irinashuvalova

Related: See More

Questions / Comments:

"clock widget" Bootstrap 3.0.0 Snippet by irinashuvalova

Related: See More

Questions / Comments:

"clock widget"
Bootstrap 3.0.0 Snippet by irinashuvalova