Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Cara menggunakan Date untuk melaksanakan jam randik dalam javascript
Cara menggunakan Date untuk melaksanakan jam randik dalam javascript
- PHPzasal
- 2023-04-21 10:05:19597semak imbas
Dengan perkembangan masyarakat moden, peranan pemasa menjadi semakin penting. Sama ada masa dalam kehidupan seharian, atau masa dalam pertandingan sukan dan pertandingan komputer, ia perlu dilaksanakan sebagai jam randik. Hari ini kami akan memperkenalkan cara menggunakan objek Date dalam JavaScript untuk melaksanakan jam randik.
Pertama, mari kita lihat objek Tarikh JavaScript. Objek Date ialah objek yang sangat biasa digunakan dalam JavaScript, yang digunakan untuk mewakili masa dan tarikh. Kita boleh menggunakan pernyataan Date() baharu untuk mencipta objek Date baharu. Secara lalai, menggunakan pernyataan Date() baharu mengembalikan masa dan tarikh semasa.
Berikut ialah contoh yang menunjukkan cara menggunakan objek Tarikh untuk mendapatkan masa semasa:
let now = new Date(); console.log(now);
Hasil output ialah masa dan tarikh semasa, contohnya:
Thu Oct 07 2021 12:08:20 GMT+0800 (中国标准时间)
Dapatkan masa semasa Selepas masa, kita boleh menggunakannya untuk melaksanakan jam randik. Jam randik perlu menggunakan pemasa, dan fungsi pemasaan dilaksanakan dengan menetapkan fungsi setInterval(). Berikut ialah contoh yang menunjukkan cara menggunakan fungsi setInterval() untuk melaksanakan pemasa mudah:
let count = 0;
let intervalId = setInterval(function() {
count++;
console.log(count);
}, 1000);
Dalam contoh ini, kami menggunakan pembolehubah kiraan untuk merekodkan bilangan saat yang telah berlalu, selepas setiap 1 saat , tambahkan kiraan sebanyak 1, dan keluarkannya ke konsol. Kami menggunakan fungsi setInterval() dan memberikannya kepada pembolehubah intervalId. Fungsi setInterval() akan melaksanakan fungsi yang diluluskan pada selang waktu dan mengembalikan pengecam unik untuk operasi seterusnya.
Seterusnya, kita boleh menambah fungsi mula, henti dan set semula pada jam randik. Di bawah ialah pelaksanaan lengkap yang merangkumi 3 butang Mula, Berhenti dan Tetapkan Semula dan boleh ditetapkan masa dengan betul.
<html>
<head>
<title>JavaScript秒表</title>
</head>
<body>
<h1>JavaScript秒表</h1>
<div id="clock">00:00:00</div>
<button id="startBtn">开始</button>
<button id="stopBtn">停止</button>
<button id="resetBtn">重置</button>
</body>
<script>
let intervalId = null;
let count = 0;
let clock = document.getElementById('clock');
let startBtn = document.getElementById('startBtn');
let stopBtn = document.getElementById('stopBtn');
let resetBtn = document.getElementById('resetBtn');
function startClock(){
intervalId = setInterval(function() {
count++;
let hours = Math.floor(count / 3600);
let minutes = Math.floor((count - hours * 3600) / 60);
let seconds = count - hours * 3600 - minutes * 60;
clock.innerHTML = hours.toString().padStart(2, '0') + ':' +
minutes.toString().padStart(2, '0') + ':' +
seconds.toString().padStart(2, '0');
}, 1000);
}
function stopClock(){
clearInterval(intervalId);
}
function resetClock(){
clearInterval(intervalId);
count = 0;
clock.innerHTML = '00:00:00';
}
startBtn.addEventListener('click', startClock);
stopBtn.addEventListener('click', stopClock);
resetBtn.addEventListener('click', resetClock);
</script>
</html>
Dalam contoh ini, kami mula-mula mencipta tiga butang dan menambah fungsi mula, berhenti dan set semula padanya. Kami menggunakan fungsi getElementById() untuk mendapatkan elemen HTML pada halaman dan menetapkannya kepada pembolehubah JavaScript yang sepadan.
Dalam fungsi startClock(), kami menggunakan fungsi setInterval() mengikut masa dan mengeluarkan hasil pemasaan ke halaman dalam format hh:mm:ss. Kami menggunakan fungsi Math.floor() untuk membulat, dan fungsi padStart() untuk memformatkan nombor menjadi rentetan dua digit untuk memudahkan keluaran ke halaman. Dalam fungsi stopClock() dan resetClock(), kami menggunakan fungsi clearInterval() untuk menghentikan pemasa dan menetapkan semula kiraan dan nilai jam masing-masing.
Jika anda ingin menggunakan JavaScript untuk melaksanakan jam randik, maka contoh ini sepatutnya dapat membantu anda. Anda boleh mengubah suai dan melanjutkan kod seperti yang diperlukan untuk mencapai fungsi pemasaan yang lebih kaya dan lebih kompleks. Baiklah, itu sahaja buat masa ini, saya harap artikel ini dapat membantu anda.
Atas ialah kandungan terperinci Cara menggunakan Date untuk melaksanakan jam randik dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!