Bootstrap Snippet Flipclock Timer Customization using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.js"></script>
<h1>Flipclock Timer Customization</h1>
    <div class="clock" style="margin:2em;"></div>
    <div class="clock2" style="margin:2em;"></div>
    <div class="message"></div>
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
            .flip-clock-wrapper ul li a div.down{
                border-bottom-left-radius: 0px !important;
                border-bottom-right-radius: 0px !important;
            }
            .clock.flip-clock-wrapper ul li a div div.inn{
                font-size: 11px !important;
                line-height: 25px !important;
            }
            ul.flip {
                padding: 0px 10px !important;
            }
            .clock.flip-clock-wrapper ul{
              width: 15px !important;
              height: 25px !important;
            }
            .clock.flip-clock-wrapper ul li a div.up:after{
                top: 12px !important;
            }
            .flip-clock-wrapper ul.flip.flip:nth-child(even){
                margin: 0px 10px 0px 0px !important;
                border-radius: 0px 6px 6px 0px !important;
            }
            .flip-clock-wrapper ul.flip:nth-child(even) li a div div.inn{
                background-color: #ff7c0c !important;
                border-radius: 0px 6px 6px 0px !important;
            }
            .flip-clock-wrapper ul.flip.flip:nth-child(odd){
                margin: 0px !important;
                border-radius: 6px 0px 0px 6px !important;
            }
            .flip-clock-wrapper ul.flip:nth-child(odd) li a div div.inn{
                background-color: #f39a3f !important;
                border-radius: 6px 0px 0px 6px !important;
            }
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
        var clock;
        
        $(document).ready(function() {
            
            var clock;
            clock = $('.clock').FlipClock({
                clockFace: 'HourlyCounter',
                autoStart: false,
                callbacks: {
                    stop: function() {
                        $('.message').html('The clock has stopped!')
                    }
                }
            });
                    
            clock.setTime(180);
            clock.setCountdown(true);
            clock.start();
            
            var clock2;
            clock2 = $('.clock2').FlipClock({
                clockFace: 'HourlyCounter',
                autoStart: false,
                callbacks: {
                    stop: function() {
                        $('.message').html('The clock has stopped!')
                    }
                }
            });
                    
            clock2.setTime(180);
            clock2.setCountdown(true);
            clock2.start();
            $( "span.flip-clock-divider" ).remove();
        });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Flipclock Timer Customization"
Bootstrap 4.0.0 Snippet by mjnprojecttesting

Related: See More

Questions / Comments:

"Flipclock Timer Customization" Bootstrap 4.0.0 Snippet by mjnprojecttesting

Related: See More

Questions / Comments:

"Flipclock Timer Customization"
Bootstrap 4.0.0 Snippet by mjnprojecttesting