Home >Web Front-end >JS Tutorial >Build an online countdown app using JavaScript

Build an online countdown app using JavaScript

王林Original: 2023-08-09 17:01:45642browse

Using JavaScript to build an online countdown application

In modern society, countdown applications are a very common function. It can be used to count down the end time of an activity, or as a reminder function to help users keep track of time. This article will introduce how to use JavaScript to build a simple and practical online countdown application.

First, we need an HTML file to build our application interface. The following is a basic HTML structure, including a container to display a countdown and some basic styles.

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

Next, we need to write JavaScript code to implement the countdown function. Create a file called countdown.js and copy the following code into it.

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();
};

In the above code, we first define a endDatetime variable to set the end time of the countdown. Then, we wrote an updateCountdown function to update the countdown display content. In the function we get the current time and convert the end time to timestamp. We then calculate the hours, minutes and seconds of the remaining time and display it on the countdown element in the HTML interface via the innerHTML attribute. Finally, we use the setTimeout function to update the countdown every second.

Finally, create a JavaScript file named countdown.js in the same directory and copy the above JavaScript code into it.

Now, we can open the HTML file in the browser and see an online application with a countdown function.

Through the above steps, we successfully built an online countdown application using JavaScript. This app can help users keep track of time, or can be used to count down the end time of an event. Readers can adjust the style of the HTML interface according to their own needs, and set the end time of the countdown according to specific scenarios.

The above is the detailed content of Build an online countdown app using JavaScript. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html JS innerHTML

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Implementing image waterfall flow effect based on JavaScriptNext article：Implementing image waterfall flow effect based on JavaScript

See more

Build an online countdown app using JavaScript

Related articles