JavaScript를 사용하여 온라인 카운트다운 앱 구축-JS 튜토리얼-php.cn

JavaScript를 사용하여 온라인 카운트다운 앱 구축

王林

풀어 주다： 2023-08-09 17:01:45

원래의

628명이 탐색했습니다.

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라는 파일을 만들고 다음 코드를 복사하세요. 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.jsrrreee

위 코드에서는 먼저 endDatetime 변수를 정의하여 카운트다운 종료 시간을 설정했습니다. 그런 다음 updateCountdown 함수를 작성하여 카운트다운 표시를 업데이트했습니다. 함수에서 현재 시간을 얻고 종료 시간을 타임스탬프로 변환합니다. 그런 다음 남은 시간의 시, 분, 초를 계산하고 innerHTML 속성을 통해 HTML 인터페이스의 countdown 요소에 표시합니다. 마지막으로 setTimeout 함수를 사용하여 매초 카운트다운을 업데이트합니다.

마지막으로 동일한 디렉터리에 countdown.js라는 JavaScript 파일을 만들고 위 JavaScript 코드를 복사합니다.

이제 브라우저에서 HTML 파일을 열고 카운트다운 기능이 있는 온라인 애플리케이션을 볼 수 있습니다. 🎜🎜위 단계를 통해 JavaScript를 사용하여 온라인 카운트다운 애플리케이션을 성공적으로 구축했습니다. 이 앱은 사용자가 시간을 추적하는 데 도움이 되거나 이벤트 종료 시간을 카운트다운하는 데 사용할 수 있습니다. 독자는 자신의 필요에 따라 HTML 인터페이스의 스타일을 조정하고 특정 시나리오에 따라 카운트다운 종료 시간을 설정할 수 있습니다. 🎜

위 내용은 JavaScript를 사용하여 온라인 카운트다운 앱 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!