Halo dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips – tips seputar dunia website. Pada kesempatan kali ini saya akan memberikan tips bagaimana Cara Menggabungkan Fungsi Split dan setInterval Javascript dimana kedua fungsi ini akan kita pakai untuk memecah sebuah kalimat yang mana akan kita pisahnya menjadi satu kata. Kemudian kita akan menampilkan dengan fungsi setInterval dengan tujuan untuk menampilkan kata demi kata secara berurutan.
Teman – teman siapkan text editornya, kemudian buat sebuah kalimat. Pada contoh kalimat saya menggunakan judul artikel kali ini yaitu Cara Menggabungkan Fungsi Split dan setInterval Javascript kemudian tampung ke dalam variabel array nya
|
1 |
var kalimat ="Cara Menggabungkan Fungsi Split dan setInterval Javascript"; |
Kemudian kita akan menghilangkan space pada kalimat yang kita buat
|
1 |
var pecah = kalimat.split(' '); |
Kemudian kita buat variabel untuk menampung id yang nanti kita akan tampilkan
|
1 |
var tampil = document.getElementById('tampil'); |
Dan kita siapkan tag html dengan id=”tampil”
Kemudian kita buat variabel lagi untuk set nilai 0
|
1 |
var nilai = 0; |
Lalu kita akan looping dan menambahkan fungsi setIntervalnya, disini kita buat object terlebih dahulu kemudian di dalamnya kita akan berikanj fungsi – fungsinya
|
1 2 3 4 5 6 7 |
var timer = setInterval(function loop(){ if(nilai<=pecah ){ nilai = 0; } nilai++; tampil.innerHTML = pecah[nilai]; },1000) |
Dengan memberikan script di atas ini dengan otomatis kalimat akan di looping, jika nilai kurang dari sama dengan (<=) pecah maka nilai nol (0) kemudian setelah tutup kurung kurawal if kita berikan nilai++ supaya otomatis tambah satu (+1) kemudian kita tampilkan dengan innerHTML dimana pecah[nilai] = pecah->variabel penampung yang kita pecah kalimat dengan spilt, [nilai] isi dari looping variabel pecah. Kemudian kita berikan waktu setInterval nya 1000 atau 1 detik. Kemudian kita stop dengan clearInterval
|
1 |
if(nilai>=pecah.length)clearInterval(timer) |
Jika sudah save dan jalankan pada browsernya, maka yang akan di jalankan pertama kali adalah Menggabungkan->(1) Fungsi->(2) Split->(3) dan->(4) setInterval->(5) Javascript->(6) karena array di mulai dari 0 maka kita harus menyamakan. Kita berikan -1 pada tampilannya agar output di mulai dari 0
Teman – teman save dan refresh kembali maka yang akan tampil sesuai kalimat yang kita pecahkan dengan split dimualai dari pertama kali yaitu Cara->(0)Menggabungkan->(1) Fungsi->(2) Split->(3) dan->(4) setInterval->(5) Javascript->(6)
Untuk script lengkapnya bisa lihat gambar di bawah ini
Cukup mudah bukan..??
Sekian pada artikel kali ini tentang Cara Menggabungkan Fungsi Split dan Interval Javascript kita berjumpa kembali pada tips dan trik selanjutnya. Semoga bermanfaat, terimakasih dan sampai jumpa.