Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >javascript-Cara mereka bentuk program undur menggunakan javascript
javascript-Cara mereka bentuk program undur menggunakan javascript
- 王林asal
- 2023-05-29 15:46:08900semak imbas
Dengan kesibukan kehidupan moden kita, orang sering memerlukan alat pemasaan yang tepat. Program kira detik ialah alat praktikal yang boleh membantu kita mengira detik dengan tepat supaya kita dapat mengatur masa kita dengan lebih baik. Dalam artikel ini, saya akan menunjukkan kepada anda cara mereka bentuk program undur menggunakan JavaScript.
Persediaan
Pertama, kita perlu mencipta fail HTML asas dan menambah kawasan kira detik dan butang padanya. Kawasan kira detik akan digunakan untuk memaparkan masa kira detik, dan butang akan digunakan untuk memulakan kira detik. Berikut ialah kod HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒计时程序</title>
</head>
<body>
<div id="countdown"></div>
<button onclick="startCountdown()">开始倒计时</button>
</body>
</html>Dalam kod di atas, kami menggunakan elemen div untuk memaparkan masa kira detik dan menambah butang untuk memulakan kira detik. Apabila butang diklik, fungsi JavaScript startCountdown() dipanggil.
Tulis kod JavaScript
Sekarang, kita perlu menulis kod JavaScript untuk mereka bentuk program kira detik. Program ini akan menggunakan objek Tarikh untuk mengira masa dan memaparkannya dalam kawasan kira detik. Berikut ialah kod JavaScript:
function startCountdown() {
// 设置倒计时时间（秒数）
var countdownTime = 60;
// 获取当前时间
var now = new Date().getTime();
// 计算倒计时结束时间
var countdownEnd = now + (countdownTime * 1000);
// 更新倒计时区域
var countdownElement = document.getElementById('countdown');
var countdownInterval = setInterval(function() {
// 获取当前时间
var now = new Date().getTime();
// 计算剩余时间
var countdownRemaining = countdownEnd - now;
// 将剩余时间转换成分、秒格式
var minutes = Math.floor((countdownRemaining % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((countdownRemaining % (1000 * 60)) / 1000);
// 更新倒计时区域
countdownElement.innerHTML = minutes + " 分钟 " + seconds + " 秒 ";
// 当倒计时结束，清除计时器
if (countdownRemaining <= 0) {
clearInterval(countdownInterval);
countdownElement.innerHTML = "倒计时结束！";
}
}, 1000);
}Dalam kod di atas, kami telah memanggil fungsi startCountdown() daripada butang. Fungsi ini mula-mula menetapkan masa kira detik (60 saat) dan memperoleh masa semasa. Seterusnya, ia mengira masa sehingga undur tamat dan menyimpannya dalam pembolehubah undurTamat.
Kemudian, fungsi menggunakan fungsi setInterval() untuk mengemas kini kawasan kira detik secara berkala. Dalam setiap selang, ia mendapat masa semasa dan mengira masa yang tinggal. Ia kemudian menukar masa yang tinggal ke dalam minit dan saat yang diformatkan dan mengemas kininya ke dalam kawasan kira detik. Akhir sekali, apabila kira detik tamat, ia mengosongkan pemasa dan menetapkan kawasan kira detik kepada "Ulangan detik!".
Program ujian
Kini, kami telah menyelesaikan reka bentuk program kira detik. Mari buka fail HTML dan uji sama ada program itu berfungsi dengan betul. Apabila kita mengklik butang "Mulakan Undur", program undur akan mula berfungsi dan memaparkan "Mesej Undur Serendah" selepas 60 saat. Jika anda ingin menukar masa kira detik, kemas kini nilai pembolehubah Masa undur dalam fungsi startCountdown.
Kesimpulan
Dengan menggunakan JavaScript, kami boleh mereka bentuk program kira detik dengan mudah untuk membantu kami mengurus masa dengan lebih baik. Program undur boleh digunakan dalam pelbagai situasi, seperti peperiksaan, kecergasan, rehat, dsb. Saya harap artikel ini dapat membantu anda mempelajari cara menggunakan JavaScript untuk mereka bentuk program kira detik dan menggunakannya dalam kehidupan sebenar.
Atas ialah kandungan terperinci javascript-Cara mereka bentuk program undur menggunakan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!