Cara Menggunakan Fungsi typeWriter Pada Javascript

Selamat datang kembali di website tips dan trik Dumet School, berjumpa kembali dengan saya dalam pembahasan tips dan trik seputar dunia website. Pada kesempatan kali ini saya akan memberikan tips tentang bagaimana Cara Menggunakan Fungsi typeWriter Pada Javascript dimana fungsi ini dapat kita pakai dan gunakan untuk membuat konten website kita lebih interaktif. Fungsi yang akan kita gunakan ini lebih penggunaan kepada text berjalan, biasa kalau kita menggunakan html ada yang nama nya tag <marquee> nah pada javascript juga ada yang seperti itu tetapi hanya saja fiturnya yang berbeda. Teman – teman ikuti terus dan coba ikuti praktek juga.

Kita akan langsung implementasikan Cara Menggunakan Fungsi typeWriter Pada Javascript teman – teman siapkan text editornya kemudian ketikkan script html nya seperti di bawah ini

<!DOCTYPE html>
<html>
<body>
<button onclick="typeWriter()">Jalankan</button>
<p id="text"></p>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

<button onclick="typeWriter()">Jalankan</button>

</body>

</html>

Kemudian save dengan nama index.html, pada script html di atas ini terdapat button dan tag p dimana pada button kita berikan onclick=”typeWriter ” dan pada tag p kita berikan id=”text” lalu kita akan menggunakan perintah javascript di buttonnya untuk menjalankan id yang ada pada tag p. Dengan begitu ketika button di klik maka text akan berjalan yang akan di jalankan oleh fungsi typeWriter. Jika sudah mari kita buat perintah javascript nya

<script>
var x = 0;
var isi = 'Saya Belajar Cara Menggunakan Fungsi typeWriter Pada Javascript';
var kecepatan= 50;
</script>

var x = 0;

var isi = 'Saya Belajar Cara Menggunakan Fungsi typeWriter Pada Javascript';

var kecepatan= 50;

</script>

Bisa teman – teman lihat pada script di atas ini saya membuat variable x = nilai awal, isi = text yang akan berjalan dan kecepatan = nilai. Selanjutnya kita tambahkan lagi untuk menjalankan varible nya

function typeWriter() {
  if (x < isi.length) {
    document.getElementById("text").innerHTML += isi.charAt(x);
    x++;
    setTimeout(typeWriter, kecepatan);
  }
}

function typeWriter() {

if (x < isi.length) {

document.getElementById("text").innerHTML += isi.charAt(x);

x++;

setTimeout(typeWriter, kecepatan);

}

Letakkan di bawah variable nya, jika sudah save dan jalankan pada browsernya. Maka pada saat di klik button Jalankan text akan auto berjalan, sehingga jika teman – teman menggunakan metode ini untuk kontent website yang inteaktif bisa gunakan metode ini. Baik, sekian pada artikel kali ini tentang Cara Menggunakan Fungsi typeWriter Pada Javascript semoga bermanfaat. terimakasih dan sampai jumpa.

Cara Menggunakan Fungsi typeWriter Pada Javascript

Facebook DUMET School

Categories