"Timer Countdown BUY NOW Width Discount Code bootstrap JavaScript "
Bootstrap 4.1.1 Snippet by KashyapVadi

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
25
26
27
28
29
30
31
32
33
34
35
36
37
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<h2>Click 10off to copy Text</h2>
<section class="footer_timer ">
<div class="container">
<div class="col-md-12">
<div id="clockdiv">
<h3 class="time_messege " style="display: inline-block; color:#fff;"><b>Discount Code <span class="offercopy font_Inter_Black" id="copy_text" onclick="copyToClipboard('#copy_text')" data-toggle="tooltip" title="Coupon Code Copied to Clipboard. Use This Coupon On Checkout.">10off</span>
is expiring in </b>
</h3>
<div>
<div class="smalltext text-capitalize">Days</div>
<span class="days "></span>
</div>
<span class="dot_time">:</span>
<div>
<div class="smalltext text-capitalize">Hours</div>
<span class="hours "></span>
</div>
<span class="dot_time">:</span>
<div>
<div class="smalltext text-capitalize ">Minutes</div>
<span class="minutes "></span>
</div>
<span class="dot_time">:</span>
<div>
<div class="smalltext text-capitalize ">Seconds</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
body {
background-color: #dddddd;
}
.footer_timer #clockdiv {
font-family: sans-serif;
color: #5700a5;
display: inline-block;
text-align: center;
font-size: 20px;
font-size: 20px;
font-weight: 800;
text-align: center;
margin-left: 65px;
}
.footer_timer #clockdiv > div {
padding: 10px;
display: inline-block;
}
.setpadding {
font-size: 1.4em;
padding-top: 3%;
}
.footer_timer #clockdiv div > span {
border-radius: 3px;
background: #fafafa;
margin: 0 5px;
padding: 3px 6px;
display: inline-block;
}
.footer_timer .smalltext {
/* padding-top: 5px; */
font-size: 10px;
font-weight: 600;
color: #d1d1d1;
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
/* Event Offer Copy Snip */
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).html()).select();
document.execCommand("copy");
$temp.remove();
$(element).tooltip("show");
}
function getTimeRemaining(endtime) {
const total = Date.parse(endtime) - Date.parse(new Date());
const seconds = Math.floor((total / 1000) % 60);
const minutes = Math.floor((total / 1000 / 60) % 60);
const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
const days = Math.floor(total / (1000 * 60 * 60 * 24));
return {
total,
days,
hours,
minutes,
seconds
};
}
function initializeClock(id, endtime) {
const clock = document.getElementById(id);
const daysSpan = clock.querySelector('.days');
const hoursSpan = clock.querySelector('.hours');
const minutesSpan = clock.querySelector('.minutes');
const secondsSpan = clock.querySelector('.seconds');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit
Image Tiles Full width
Awesome discount label
Carousel with Timer and Caption

Questions / Comments: