Cara membuat countdown dengan javascript

بسم الله الرحمن الرحيم

var downloadButton = document.getElementById("download");
var counter = 10;
var newElement = document.createElement("p");
newElement.innerHTML = "You can download the file in 10 seconds.";
var id;

downloadButton.parentNode.replaceChild(newElement, downloadButton);

id = setInterval(function() {
    counter--;
    if(counter < 0) {
        newElement.parentNode.replaceChild(downloadButton, newElement);
        clearInterval(id);
    } else {
        newElement.innerHTML = "You can download the file in " + counter.toString() + " seconds.";
    }
}, 1000);

Baris pertama : Membuat variable dengan nama "downloadButton" yang isinya "document.getElementById("download");" fungsinya adalah untuk mengambil element dengan id "download" dari script html diatas.

Baris kedua : Membuat variable counter dengan isi 10, digunakan untuk men-set panjang interval countdown.

Baris ketiga : Membuat variable dengan nama "newElement" yang isinya "document.createElement("p");" berfungsi untuk membuat atau menambahkan element baru, dalam kasus diatas yang ditambahkan adalah syntac " <p> "

Baris keempat : Menambahkan kata pada syntax " <p> " yang telah dibuat oleh variable "newElement"

Baris kelima : Membuat vaiable dengan nama "id"

Baris keenam : Berfungsi untuk mengganti variable "downloadButton" dengan "Variable newElement"

Baris ketujuh : Memanggil fungsi "setInterval" digunakan untuk menge-set timer (start counter), cara penggunaanya adalah "setInterval(code,millisec,lang)". SetInterval adalah suatu methode dari javascript yang melakukan pekerjaan berulang-ulang sesuai dengan interval yang di tentukan.

Barise kedelapan : Mendefinisikan fungsi dengan nama "Counter - -" tanda -- artinya pengurangan atau decrement

Barise kesembilan : Jika kondisi memenuhi, yaitu jika nilai counter kurangdari 0 maka akan menjalankan kode di bawahnya

Barise Kesepuluh : Menggganti fungsi "downloadButton" dengan fungsi "newElement"

Baris kesebelas : Menghapus interval countdown id

Baris keduabelas : Jika kondisi tidak memenuhi, berarti masih dalam countdown, "counter.toString" berfungsi untuk merubah fungsi counter tang tadinya integer menjadi string.

Angka 1000 paling akhir adalah panjang interval dalam milisecond milik fungsi setinterval, jika ditambah maka setiap detik berganti semakin lama, begitupula sebaliknya.

Untuk lebih jelasnya simak pengplikasianya berikut ini

Demikian yang bisa saya share hari ini, jika ada kata yang kurang bisa di pahami saya mohon maaf karena saya juga masih belajar. Jika ada masalah atau kesulitan silahkan tulis di kolom komentar