JavaScript を使用してオンラインカウントダウンアプリを構築する-jsチュートリアル-php.cn

JavaScript を使用してオンラインカウントダウンアプリを構築する

王林

リリース： 2023-08-09 17:01:45

オリジナル

663 人が閲覧しました

JavaScript を使用してオンラインカウントダウンアプリを構築する

JavaScript を使用してオンラインカウントダウンアプリケーションを構築する

現代社会では、カウントダウンアプリケーションは非常に一般的な機能です。これは、アクティビティの終了時間をカウントダウンするために使用したり、ユーザーが時間を追跡するのに役立つリマインダー機能として使用したりできます。この記事では、JavaScript を使用してシンプルで実用的なオンラインカウントダウンアプリケーションを構築する方法を紹介します。

まず、アプリケーションインターフェイスを構築するための HTML ファイルが必要です。以下は、カウントダウンを表示するコンテナといくつかの基本スタイルを含む、基本的な HTML 構造です。

<!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>

ログイン後にコピー

次に、カウントダウン関数を実装するための JavaScript コードを記述する必要があります。 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();
};

ログイン後にコピー

上記のコードでは、まず endDatetime 変数を定義して、カウントダウンの終了時刻を設定します。次に、カウントダウンの表示内容を更新する updateCountdown 関数を作成しました。この関数では、現在時刻を取得し、終了時刻をタイムスタンプに変換します。次に、残り時間の時、分、秒を計算し、innerHTML 属性を介して HTML インターフェースの countdown 要素に表示します。最後に、setTimeout 関数を使用して、カウントダウンを毎秒更新します。

最後に、同じディレクトリに countdown.js という名前の JavaScript ファイルを作成し、その中に上記の JavaScript コードをコピーします。

これで、ブラウザで HTML ファイルを開くと、カウントダウン機能を備えたオンラインアプリケーションが表示されます。

上記の手順により、JavaScript を使用したオンラインカウントダウンアプリケーションを構築することができました。このアプリは、ユーザーが時間を追跡したり、イベントの終了時間をカウントダウンしたりするのに役立ちます。読者は、自分のニーズに応じて HTML インターフェイスのスタイルを調整し、特定のシナリオに従ってカウントダウンの終了時間を設定できます。

以上がJavaScript を使用してオンラインカウントダウンアプリを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。