"Countdown Timer BS4"
Bootstrap 4.1.1 Snippet by aswanik11

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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="container">
<div class="row">
<div class="col-lg-6 offset-3">
<h2>Sale up to 45%!</h2>
<div class="timer">
<div>
<span class="days" id="day"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours" id="hour"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes" id="minute"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds" id="second"></span>
<div class="smalltext">Seconds</div>
</div>
<p id="time-up"></p>
</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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
h2 {
font-family: Poppins;
font-weight: 500;
margin: 0 0 20px;
}
.timer {
margin: 0 0 45px;
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
.timer div {
padding: 10px;
border-radius: 3px;
background: #000000;
display: inline-block;
font-family: Oswald;
font-size: 26px;
font-weight: 400;
width: 80px;
}
.timer .smalltext {
color: #888888;
font-size: 12px;
font-family: Poppins;
font-weight: 500;
display: block;
padding: 0;
width: auto;
}
.timer #time-up {
margin: 8px 0 0;
text-align: left;
font-size: 14px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var deadline = new Date("july 30, 2050 12:00:00").getTime();
var x = setInterval(function() {
var currentTime = new Date().getTime();
var t = deadline - currentTime;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("day").innerHTML =days ;
document.getElementById("hour").innerHTML =hours;
document.getElementById("minute").innerHTML = minutes;
document.getElementById("second").innerHTML =seconds;
if (t < 0) {
clearInterval(x);
document.getElementById("time-up").innerHTML = "TIME UP";
document.getElementById("day").innerHTML ='0';
document.getElementById("hour").innerHTML ='0';
document.getElementById("minute").innerHTML ='0' ;
document.getElementById("second").innerHTML = '0';
}
}, 1000);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: