Letakkan HTML berikut:
<div class='countdown'>
<span class='countdown_text'>INGAT!!! Promo akan ditutup setelah</span>
<span id='time'>01:00:00</span>
<span>minutes!</span>
</div>
Letakkan CSS berikut:
/* COUNT DOWN */
@font-face {
font-family: Roboto;
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v16/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'), url(https://fonts.gstatic.com/s/roboto/v16/QHD8zigcbDB8aPfIoaupKOvvDin1pK8aKteLpeZ5c0A.ttf) format('truetype')
}
@font-face {
font-family: Roboto;
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'), url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOCZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype')
}
.countdown {
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 400;
text-align:center;
padding:20px 0;
color:#fff;
}
.countdown .countdown_text {
display: block;
}
#time {
font-family: Roboto, sans-serif;
font-size: 40px;
font-weight: 700;
vertical-align: middle;
color:#fff;
}
Letakkan JS berikut:
<script>
//<![CDATA[
function startTimer(duration, display) {
var timer = duration, hours, minutes, seconds;
setInterval(function() {
hours = parseInt(timer / 3600, 10);
minutes = parseInt(timer % 3600 / 60, 10);
seconds = parseInt(timer % 60, 10);
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = hours + ":" + minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function() {
var fiveMinutes = 60 * 60,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
//]]>
</script>