Countdown Timer BS4

Countdown Timer BS4

Countdown Timer Bootstrap 4

html code…

[ccie_html]<div class=”container”>
<div class=”row”>
<div class=”col-lg-12 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>[/ccie_html]

 

Below CSS code to add in an external CSS file or use it as per your need…

<code lang=“css”>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;
}
.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;
font-style: normal;
color: #000000;
font-weight: 500;
letter-spacing: 1px;
}
</code>

 

Javascript code… please also remember to add jquery plugin version 1.11 or greater.

<code lang=“javascript”>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);
</code>


One Reply to “Countdown Timer BS4”

Leave a Reply

Your email address will not be published. Required fields are marked *