<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <div class="countdown-timer"> <div class="countdown-container"> <p class="countdown-message countdown-title">Counting down to 2020</p> <div class="countdown-dispaly" id="countdown-display"> <div class="counterdown-content"> <span class="time-col"> <span class="counting counting-days">--</span> <span class="subject"><span></span>days</span> </span> <span class="time-col"> <span class="counting counting-hours">--</span> <span class="subject"><span></span>Hours</span> </span> <span class="time-col"> <span class="counting counting-minutes">--</span> <span class="subject"><span></span>minutes</span> </span> <span class="time-col"> <span class="counting counting-seconds">--</span> <span class="subject"><span></span>seconds</span> </span> </div> </div> </div> </div>

@baseColor: #4D4D4D; @darkGrey: #5D6368; @ultraLightGrey: #E7E7E7; @coolGrey2: #F1F4F8; @lighterGrey: #F2F2F2; @white: #FFFFFF; @black: #000000; html, body { height: 100%; } .countdown-timer { display: flex; width: 100%; height: 100%; background-color: @darkGrey; background: linear-gradient(135deg, #f2b382 0%,#022c56 100%); justify-content: center; align-items: center; .countdown-message { display: block; color: @white; font-size: 24px; text-align: center; } .countdown-dispaly { display: block; margin: 0 0 0 8px; padding-top: 8px; } .counterdown-content { display: table; position: relative; width: 280px; background-color: @black; border-radius: 5px; } .time-col { display: table-cell; width: 25%; border-left: 1px @darkGrey solid; &:first-child { border-left: none; } } .counting, .subject { display: block; padding: 8px 0; color: @white; text-align: center; line-height: 1em; } .counting { font-size: 26px; font-weight: 700; } .subject { position: relative; font-size: 14px; span { position: absolute; left: 40%; top: 0; width: 20%; border-top: 1px @darkGrey solid; } } }

(function () { "use strict"; var expiryDate = "December 31 2020 23:59:59 GMT+0700"; function getTimeLeft(endTime) { var dateDiff = Date.parse(endTime) - Date.parse(new Date()); var seconds = Math.floor((dateDiff / 1000) % 60); var minutes = Math.floor((dateDiff / 1000 / 60) % 60); var hours = Math.floor((dateDiff / (1000 * 60 * 60)) % 24); var days = Math.floor(dateDiff / (1000 * 60 * 60 * 24)); if (dateDiff <= 0) { days = "0"; hours = "0"; minutes = "0"; seconds = "0"; } return { "total": dateDiff, "days": days, "hours": hours, "minutes": minutes, "seconds": seconds }; } function counterStart(id, endTime) { var counterPlay = document.getElementById(id); var daysEle = counterPlay.querySelector(".counting-days"); var hoursEle = counterPlay.querySelector(".counting-hours"); var minutesEle = counterPlay.querySelector(".counting-minutes"); var secondsEle = counterPlay.querySelector(".counting-seconds"); function timerUpdate() { var time = getTimeLeft(endTime); daysEle.textContent = time.days; hoursEle.textContent = ("0" + time.hours).slice(-2); minutesEle.textContent = ("0" + time.minutes).slice(-2); secondsEle.textContent = ("0" + time.seconds).slice(-2); if (time.total <= 0) { clearInterval(timeinterval); } } timerUpdate(); var timeinterval = setInterval(timerUpdate, 1000); } counterStart("countdown-display", expiryDate); })();