<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> <span class="seconds "></span> </div> <div><a href="#" class="footr_buy font_Inter_Black">BUY NOW</a></div> </div> </div> </div> </section>

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; } .footer_timer { position: fixed; bottom: 0; width: 100%; background-color: #5700a5; } .footr_buy { background-color: #ffd23f; color: #240043; padding: 5px 15px; border-radius: 6px; } .dot_time { color: #fff; padding: 0; margin: 0; margin: 0 -11px; } .offercopy { background-color: #f72585; color: #fff; padding: 4px 13px; border: 2px dashed #ffc400; border-radius: 7px; margin: 0 5px; cursor: pointer; }

/* 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'); function updateClock() { const t = getTimeRemaining(endtime); daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ('0' + t.hours).slice(-2); minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); if (t.total <= 0) { hoursSpan.innerHTML = ('00'); minutesSpan.innerHTML = ('00'); secondsSpan.innerHTML = ('00'); clearInterval(timeinterval); } } updateClock(); const timeinterval = setInterval(updateClock, 1000); } myStringDate = "09 July 2021 00:00:00"; const deadline = new Date(myStringDate); initializeClock('clockdiv', deadline);