How to make Countdown on your Landing page

April 30, 2017



Hello everyone! Today you will have the possibility to install amazing countdoan on your website Include the necessary javascript files at the end of the page.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script type="text/javascript" src="js/kinetic.js"></script> 
<script type="text/javascript" src="../jquery.final-countdown.js"></script> 




Include the required bootstrap 3 CSS in the head of the page. 

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">





Create a countdown timer using the html structure like this

<div class="countdown-container container">
<div class="clock row">

<!-- days --> 
<div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas_days" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-days type-time">DAYS</p>
</div>
</div>
</div>
</div>

<!-- hours --> 

<div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas_hours" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-hours type-time">HOURS</p>
</div>
</div>
</div>
</div>

<!-- minutes --> 
<div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas_minutes" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-minutes type-time">MINUTES</p>
</div>
</div>
</div>
</div>

<!-- seconds --> 
<div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas_seconds" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-seconds type-time">SECONDS</p>
</div>
</div>
</div>
</div>
</div>

</div>


Add the following CSS snippet to your CSS file. 

html, body {
height: 100%;
}
html {
background-image: url('../img/sample.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
body {
background-color: rgba(44,62,80 , 0.6 );
background-image: url('../img/pattern.png');
background-position: center;
background-repeat: repeat;
font-family: 'Raleway', 'Arial', sans-serif;
}
.countdown-container {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
.clock-item .inner {
height: 0px;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.clock-canvas {
background-color: rgba(255, 255, 255, .1);
border-radius: 50%;
height: 0px;
padding-bottom: 100%;
}
.text {
color: #fff;
font-size: 30px;
font-weight: bold;
margin-top: -50px;
position: absolute;
top: 50%;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
width: 100%;
}
.text .val {
font-size: 50px;
}
.text .type-time {
font-size: 20px;
}
 @media (min-width: 768px) and (max-width: 991px) {
.clock-item {
margin-bottom: 30px;
}
}
 @media (max-width: 767px) {
.clock-item {
margin: 0px 30px 30px 30px;
}
}


Initialize the countdown timer and set the start time, end time and current time in the javascript. 


<script type="text/javascript">
$('.countdown').final_countdown({
start: '1362139200',
end: '1388461320',
now: '1387461319'
});
</script>



All the default options.

 $(document).ready(function() { $('.countdown').final_countdown({ start: '1362139200', end: '1388461320', now: '1387461319', selectors: { value_seconds: '.clock-seconds .val', canvas_seconds: 'canvas_seconds', value_minutes: '.clock-minutes .val', canvas_minutes: 'canvas_minutes', value_hours: '.clock-hours .val', canvas_hours: 'canvas_hours', value_days: '.clock-days .val', canvas_days: 'canvas_days' }, seconds: { borderColor: '#7995D5', borderWidth: '6' }, minutes: { borderColor: '#ACC742', borderWidth: '6' }, hours: { borderColor: '#ECEFCB', borderWidth: '6' }, days: { borderColor: '#FF9900', borderWidth: '6' }}, function() { // Finish callback }); });

 Change log: 2015-07-17 undefined callback fix.

You Might Also Like

0 comments

Share your opinion with us ;)

Like us on Facebook