Konsep pengatur waktu dan penundaan
//- timer
// Nomor ID Timer SetInterval (Fungsi Callback, Miliseconds);
// Panggil fungsi panggilan balik setiap milidetik
// ClearInterval (Nomor ID Timer)
// Hentikan timer dengan nomor ID yang ditentukan (sebenarnya menghancurkan dan melepaskan sumber daya)
//-Delayer
// Tunda Nomor ID SetTimeout (fungsi panggilan balik, interval milidetik)
// Mulai dari panggilan, tunggu jumlah milidetik yang ditentukan dan hubungi fungsi panggilan balik sekali
// Gunakan ClearTimeout untuk menghapus penundaan
Gambar reproduksi:
Gambar berikut akan muncul setelah halaman dibuka: Setelah itu, jumlah nilai tombol berkurang sebesar 1 setiap 1 detik sampai 0 menghentikan konten tombol menjadi menyenangkan
Kode Implementasi:
Salinan kode adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<type style = "text/css">
#btn
{
Lebar: 200px;
Tinggi: 50px;
latar belakang -color: gary;
}
</tyle>
<type skrip = "Teks/JavaScript">
onload = function () {
// Dapatkan objek tombol
var btn = document.geteLementById ('btn');
// Buat timer dan kembalikan ID timer
var intervalid = setInterval (function () {
var waitsecond = parseInt ((// d+/). exec (btn.value)); // gunakan metode regexp.exec () untuk mengembalikan konten string yang cocok
WaitSecond-; // Time-
if (waitsecond> = 0) {// penilaian
btn.value = btn.value.replace (// d+/, waitsecond) // Gunakan metode string.repleace (regexp, kode) untuk mengganti nomor dalam nilai tombol dan mengembalikan hasil penggantian
} kalau tidak {
btn.value = 'setuju'; // ubah nilai tombol untuk menyetujui
btn.disabled = false; // ubah nilai tombol dinonaktifkan menjadi false
clearInterval (intervalid); // Hapus timer
}
}, 1000);
};
</script>
</head>
<body>
<input type = "tombol" name = "name" value = "Harap baca dengan cermat selama 5 detik dan klik untuk setuju untuk melanjutkan" id = "btn" dinonaktifkan = "dinonaktifkan"/>
</body>
</html>