Bagaimana Anda menghentikan penghitung waktu di javascript?

Pilih elemen halaman dan buat tombol mulai dan berhenti. Jika Anda membuat elemen dalam JavaScript seperti kode di bawah ini, Anda juga dapat mengatur gaya dengan properti objek gaya elemen

cons utama = dokumen. querySelector('. utama');
pengatur waktu const = dokumen. createElement('div');
const btn1 = dokumen. createElement('tombol');
const btn2 = dokumen. createElement('tombol');
utama. tambahkan(pewaktu);
utama. tambahkan(btn1);
utama. tambahkan(btn2);

btn1. gaya. backgroundColor = 'hijau';
btn2. gaya. backgroundColor = 'merah';
btn1. gaya. warna = 'putih';
btn2. gaya. warna = 'putih';
btn1. textContent = 'Mulai';
btn2. textContent = 'Berhenti';

Siapkan objek global yang dapat digunakan untuk menyimpan waktu mulai dan berhenti penuh. Objek bernama game dapat dipilih dalam kode sebagai globalnya, dan dapat memiliki nilai properti yang ditetapkan karena merupakan objek. Pengatur waktu permainan dapat digunakan untuk menahan interval pembaruan tampilan waktu

permainan const = {timer. nol, mulai. nol, akhir. batal};

Tambahkan pendengar acara ke tombol. Nonaktifkan tombol stop sehingga hanya ada satu opsi. Di bawah kode akan menambahkannya sebagai pendengar acara, mendengarkan klik pada tombol

btn1. addEventListener('klik',startTimer);
btn2. addEventListener('klik',endTimer);
btn2. dinonaktifkan = benar;

Atur fungsi untuk memulai dan menghentikan timer. Alihkan tombol untuk dinonaktifkan untuk memulai, sehingga tidak dapat diklik lagi. Dan berhenti harus diaktifkan. Dapatkan nilai Date() baru saat ini, lalu dapatkan nilai getTime() yang akan mengembalikan waktu dalam milidetik sejak zaman ECMAScript. (yang didefinisikan sebagai 1 Januari 1970, UTC)

fungsi startTimer(){
btn1. dinonaktifkan = benar;
btn2. dinonaktifkan = salah;
tanggal const = Tanggal baru();
permainan. mulai = tanggal. getTime();
}

Atur fungsi untuk menghentikan pengatur waktu. Alihkan tombol untuk dinonaktifkan dan diaktifkan. Dapatkan tanggal saat ini dan atur waktu akhir. Anda dapat menghitung jumlah waktu yang berlalu dengan mengurangkan permainan. waktu mulai dari permainan. akhir waktu. Bagilah dengan 1000 untuk detik. Tambahkan dalam kondisi untuk memeriksa apakah permainan. timer diatur yang akan menghapus variabel interval dengan nama game. timer

Timer. stop() fungsi di D3. js digunakan untuk menghentikan fungsi pengatur waktu yang sedang berlangsung sehingga mencegah panggilan lebih lanjut ke fungsi tersebut. Fungsi ini hanya akan berfungsi jika pengatur waktu belum berhenti

Sekarang mari kita buat dua tombol. dengan mengklik yang pertama, biarkan pengatur waktu mulai, dan dengan mengklik yang kedua, itu akan berhenti. Di sini semuanya tidak akan sesederhana itu dan jebakan menanti kita. Untuk memahami inti dari trik ini, saya akan menjelaskan pembuatan kode secara bertahap

Jadi, kami membuat dua tombol

start stop

Kami mendapatkan referensi ke tombol-tombol ini ke dalam variabel

let start = document.querySelector('#start'); let stop = document.querySelector('#stop');_

Dengan menekan tombol pertama, kita memulai pengatur waktu dengan menuliskan nomornya ke sebuah variabel

start.addEventListener('click', function() { let i = 0; let timerId = setInterval(function() { console.log('!') }, 1000); });

Dan sekarang kita akan menghentikan timer dengan menekan tombol kedua

start.addEventListener('click', function() { let i = 0; let timerId = setInterval(function() { console.log('!') }, 1000); }); // Stopping the timer: stop.addEventListener('click', function() { clearInterval(timerId); });

Namun, jika kami mencoba menjalankan kode di atas, kami akan terkejut. ketika kami mencoba menghentikan pengatur waktu, kami menemukan bahwa variabel timerId sama dengan undefined. Kenapa ini terjadi?

Untuk mengatasi masalah ini, mari kita jadikan variabel timerId global - dalam hal ini, ini akan tersedia baik di fungsi mulai pengatur waktu maupun di fungsi berhenti

let timerId; // makes the variable global start.addEventListener('click', function() { let i = 0; timerId = setInterval(function() { console.log('!') }, 1000); }); stop.addEventListener('click', function() { clearInterval(timerId); });_

Biarkan variabel diberikan yang awalnya menyimpan nomor let start = document.querySelector('#start'); let stop = document.querySelector('#stop');0. Ada juga dua tombol. Dengan menekan tombol pertama, mulai penghitung waktu, yang setiap detik akan mengurangi nilai variabel sebesar let start = document.querySelector('#start'); let stop = document.querySelector('#stop');1 dan menampilkan nilai baru ke konsol. Segera setelah nilai variabel mencapai nol, hentikan timer

Hentikan timer dengan menekan tombol kedua. Hentikan juga pengatur waktu jika tombol kedua tidak ditekan, tetapi nilai variabel mencapai nol

Beberapa pemrogram menulis kode yang, ketika sebuah tombol ditekan, memulai pengatur waktu yang mencetak waktu saat ini ke konsol

let start = document.querySelector('#start'); let stop = document.querySelector('#stop');2 let start = document.querySelector('#start'); let stop = document.querySelector('#stop');3

Namun setelah menjalankan kode, ternyata tombol stop tidak berfungsi. Harap perbaiki kesalahan pembuat kode

Pemrogram lain juga menulis kode untuk menyelesaikan masalah sebelumnya

let start = document.querySelector('#start'); let stop = document.querySelector('#stop');2 let start = document.querySelector('#start'); let stop = document.querySelector('#stop');5

Namun setelah menjalankan kode, lagi-lagi ternyata tombol stop tidak berfungsi. Perbaiki kesalahan pembuat kode

Pemrogram lain juga menulis kode untuk menyelesaikan masalah sebelumnya

let start = document.querySelector('#start'); let stop = document.querySelector('#stop');2 let start = document.querySelector('#start'); let stop = document.querySelector('#stop');7

Namun setelah menjalankan kode, lagi-lagi ternyata tombol stop tidak berfungsi. Perbaiki kesalahan pembuat kode

Pemrogram lain juga menulis kode untuk menyelesaikan masalah sebelumnya

let start = document.querySelector('#start'); let stop = document.querySelector('#stop');2 let start = document.querySelector('#start'); let stop = document.querySelector('#stop');9

Namun setelah menjalankan kode, lagi-lagi ternyata tombol stop tidak berfungsi. Perbaiki kesalahan pembuat kode

Kode yang saya berikan di bagian teoretis tidak memperhitungkan fakta bahwa beberapa klik dapat dilakukan pada tombol mulai. Untuk memperbaiki masalah ini, Anda dapat melepaskan ikatan acara dari tombol ini dengan menekan tombol mulai, dan mengikatnya kembali dengan menekan tombol berhenti. Perbaiki masalahnya

Bagaimana cara memulai dan menghentikan timer di JavaScript?

Bagaimana cara menghentikan timer pada 0 di JavaScript?

Bagaimana Anda memulai dan menghentikan timer?

Bagaimana cara me-restart timer di JavaScript?