 |
| Membuat Countdown Timer pada Postingan Blog |
Untuk membuat countdown timer pada postingan blog dibutuhkan dua
bagian kode yaitu kode javascript untuk pengaturan waktunya dan kode
html untuk menampilkan waktu yang sudah diatur tersebut. Perlu diingat blogger tidak dapat memproses beberapa kode javascript secara
bersamaan. Sehingga hanya satu perintah javascript saja yang dapat diproses dan ditampilkan di halaman blog.
Berikut ini adalah contoh countdown timer :
Waktu Akan Berakhir Dalam 03:00 Menit!
Untuk membuat countdown timer pada postingan blog silahkan copy kode berikut pada postingan blog anda dan sesuaikan waktu yang anda butuhkan.
<script>
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
window.open("waktuberakhir.html","_self");
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 3,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
</script>
<body>
<div><center><h3>Waktu Akan Berakhir Dalam <span id="time">03:00</span> Menit!</h3></center></div>
</body>
<br>
Teks berwarna merah dapat diisi alamat web yang dituju ketika waktu berakhir.
Teks berwarna biru adalah waktu tunggu dalam satuan menit yang diganti dan disamakan antara kode di <script> dan kode yang ada di dalam <div>
Teks berwarna pink dapat diubah sesuai kebutuhan.
Tidak ada komentar:
Posting Komentar