"Flash Deal Timer"
Bootstrap 4.0.0 Snippet by mjnprojecttesting

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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 ---------->
<div class="container">
<div class="row">
<div class="hours parent_time">
<div>Hours</div>
<div class="hours_0 child_time child_time0" ></div>
<div class="hours_1 child_time child_time1" ></div>
</div>
<div class="minutes parent_time">
<div>Mins</div>
<div class="minutes_0 child_time child_time0" ></div>
<div class="minutes_1 child_time child_time1" ></div>
</div>
<div class="seconds parent_time">
<div>Secs</div>
<div class="seconds_0 child_time child_time0" ></div>
<div class="seconds_1 child_time child_time1" ></div>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.container{
margin : 10px;
}
.parent_time {
margin: 0px 5px;
}
.child_time0{
background : #f39a3f;
border-radius: 5px 0px 0px 5px;
}
.child_time1{
background : #ff7c0c;
border-radius: 0px 5px 5px 0px;
}
.child_time{
float : left;
color : #FFF;
padding: 6px;
margin : 0px;
}
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
// Set the date we're counting down to
var countDownDate = new Date();
// add a day
countDownDate.setDate(countDownDate.getDate() + 1);
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
if(days>0){
hours = hours + (days*24);
days = 0;
}
hours = zeroPad(hours,2);
minutes = zeroPad(minutes,2);
seconds = zeroPad(seconds,2);
hours = hours.split('');
minutes = minutes.split('');
seconds = seconds.split('');
// Output the result in an element with id="demo"
jQuery('.hours_0').html(hours[0]);
jQuery('.hours_1').html(hours[1]);
jQuery('.minutes_0').html(minutes[0]);
jQuery('.minutes_1').html(minutes[1]);
jQuery('.seconds_0').html(seconds[0]);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit PRO BS3
Carousel with Timer and Caption

Questions / Comments: