Beranda>Tutorial Desain Web>Tutorial Javascript

Gunakan JavaScript untuk menyimulasikan permainan mengetik!

Penulis：Eve Cole Waktu Pembaruan：2022-08-10 11:30:26
Saya tidak ada pekerjaan hari ini dan ingin mencoba simulasi permainan mengetik. Berikut ini adalah renderingnya. Ini akan merekam dan menilai pengetikan. Jika Anda menambahkan fungsi setInterval ke periferal, Anda dapat menguji kecepatan mengetik.

html

<div class="wrapper">
  <div id="teks">SEBUAH</div>
  <masukan tipe="teks" id="ipt">
</div>

isi css

,
html {
  lebar: 100%;
  tinggi: 100%;
 }

 .wrapper {
  lebar: 400 piksel;
  margin: 20px otomatis;
 }

 div {
  ukuran font: 100px;
  berat font: 900;
  perataan teks: tengah;

 }
 masukan{
  lebar: 400 piksel;
  margin: 20px otomatis;
 }

js

var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
var teks = dokumen.getElementById('teks') 
var ipt = dokumen.getElementById('ipt')
var res;
var resolusi baru;
var acak = Matematika.bulat(Matematika.acak() * 25);
jumlah var = 0
 window.onkeyup = fungsi (e) {
  var acak = Matematika.bulat(Matematika.acak() * 25);
  Res baru = str[acak]
  res = teks.innerHTML
  teks.innerHTML = Res baru
  if(e.keyCode == res.charCodeAt(0)){
   hitung++;
   ipt.nilai = '';
  }kalau tidak{
   alert('permainan selesai' + ' ' +'Skor anda adalah'+ ':' + hitungan)
   hitungan = 0;
   ipt.nilai = '';
  }

 }

Rekomendasi terkait: [Tutorial Video JavaScript]

Di atas adalah permainan mengetik yang disimulasikan menggunakan JavaScript! Untuk lebih jelasnya silahkan perhatikan artikel terkait lainnya di website php Cina!
Artikel Terkait