Bina apl kira detik dalam talian menggunakan JavaScript-tutorial js-php.cn

Bina apl kira detik dalam talian menggunakan JavaScript

王林

Lepaskan： 2023-08-09 17:01:45

asal

600 orang telah melayarinya

Bina apl kira detik dalam talian menggunakan JavaScript

Gunakan JavaScript untuk membina aplikasi kira detik dalam talian

Dalam masyarakat moden, aplikasi kira detik adalah fungsi yang sangat biasa. Ia boleh digunakan untuk mengira detik masa tamat sesuatu aktiviti, atau sebagai fungsi peringatan untuk membantu pengguna menjejaki masa. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk membina aplikasi kira detik dalam talian yang mudah dan praktikal.

Pertama, kami memerlukan fail HTML untuk membina antara muka aplikasi kami. Berikut ialah struktur HTML asas, termasuk bekas untuk memaparkan kira detik dan beberapa gaya asas.

<!DOCTYPE html>
<html>
<head>
    <title>在线倒计时应用</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        .countdown-container {
            margin-top: 100px;
            font-size: 48px;
        }
        .countdown {
            color: #FF0000;
        }
    </style>
</head>
<body>
    <div class="countdown-container">
        倒计时剩余时间：<span id="countdown" class="countdown"></span>
    </div>
    
    <script src="countdown.js"></script>
</body>
</html>

Salin selepas log masuk

Seterusnya, kita perlu menulis kod JavaScript untuk melaksanakan fungsi kira detik. Buat fail yang dipanggil countdown.js dan salin kod berikut ke dalamnya. countdown.js的文件，将以下代码复制到其中。

window.onload = function() {
    // 设置倒计时的结束时间，格式为 "YYYY-MM-DD HH:mm:ss"
    var endDatetime = "2022-12-31 00:00:00";
    
    // 定义更新倒计时的函数
    function updateCountdown() {
        // 获取当前时间
        var currentDatetime = new Date();
        
        // 将结束时间转换为时间戳
        var endTimestamp = Date.parse(endDatetime);
        
        // 计算剩余时间（单位为毫秒）
        var remainingTime = endTimestamp - currentDatetime.getTime();
        
        // 计算剩余时间的小时、分钟和秒数
        var hours = Math.floor(remainingTime / (1000 * 60 * 60));
        remainingTime = remainingTime % (1000 * 60 * 60);
        
        var minutes = Math.floor(remainingTime / (1000 * 60));
        remainingTime = remainingTime % (1000 * 60);
        
        var seconds = Math.floor(remainingTime / 1000);
        
        // 更新倒计时的显示
        document.getElementById("countdown").innerHTML = hours + "时" + minutes + "分" + seconds + "秒";
        
        // 每隔一秒更新倒计时
        setTimeout(updateCountdown, 1000);
    }
    
    // 调用函数开始倒计时
    updateCountdown();
};

Salin selepas log masuk

在上面的代码中，我们首先定义了一个endDatetime变量，用于设置倒计时的结束时间。然后，我们编写了一个updateCountdown函数来更新倒计时的显示内容。在函数中，我们获取当前时间并将结束时间转换为时间戳。然后，我们计算剩余时间的小时、分钟和秒数，并通过innerHTML属性将其显示在HTML界面中的countdown元素上。最后，我们使用setTimeout函数实现每隔一秒钟更新一次倒计时。

最后，在同一目录下创建一个名为countdown.jsrrreee

Dalam kod di atas, kami mula-mula mentakrifkan pembolehubah endDatetime untuk menetapkan masa tamat kira detik. Kemudian, kami menulis fungsi updateCountdown untuk mengemas kini paparan kira detik. Dalam fungsi kita mendapat masa semasa dan menukar masa tamat kepada cap waktu. Kami kemudian mengira jam, minit dan saat bagi masa yang tinggal dan memaparkannya pada elemen countdown dalam antara muka HTML melalui atribut innerHTML. Akhir sekali, kami menggunakan fungsi setTimeout untuk mengemas kini kira detik setiap saat.

Akhir sekali, buat fail JavaScript bernama countdown.js dalam direktori yang sama dan salin kod JavaScript di atas ke dalamnya.

Kini, kita boleh membuka fail HTML dalam penyemak imbas dan melihat aplikasi dalam talian dengan fungsi kira detik. 🎜🎜Melalui langkah di atas, kami berjaya membina aplikasi kira detik dalam talian menggunakan JavaScript. Apl ini boleh membantu pengguna menjejaki masa, atau boleh digunakan untuk mengira detik masa tamat sesuatu acara. Pembaca boleh melaraskan gaya antara muka HTML mengikut keperluan mereka sendiri, dan menetapkan masa tamat kira detik mengikut senario tertentu. 🎜

Atas ialah kandungan terperinci Bina apl kira detik dalam talian menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!