纯js实现动态时间显示

2023年5月27日下午12:33 • JavaScript

以下是详细讲解“纯JS实现动态时间显示”的完整攻略。

一、准备工作

首先我们需要一个HTML页面，并在页面中添加一个用于显示时间的容器，例如：

<!DOCTYPE html>
<html>
<head>
    <title>动态时间显示</title>
</head>
<body>
    <div id="time"></div>
    <script src="time.js"></script>
</body>
</html>

在这个示例中，我们添加了一个id为“time”的div容器，用于显示动态时间，同时在body末尾引入了名为“time.js”的JS文件。

二、实现动态时间显示

下面来编写我们的JS文件，首先需要获取并显示当前的时间。我们可以使用JS的Date对象来获取当前时间，然后将其格式化为我们需要的样式。以下是一个示例代码：

// 获取并显示当前时间
function showTime() {
    var date = new Date();  // 获取当前时间
    var year = date.getFullYear(); // 获取年份
    var month = date.getMonth()+1; // 获取月份，需要加1
    var day = date.getDate(); // 获取天数
    var hour = date.getHours(); // 获取小时
    var minute = date.getMinutes(); // 获取分钟
    var second = date.getSeconds(); // 获取秒数
    var time = year + "-" + addZero(month) + "-" + addZero(day) + " " + addZero(hour) + ":" + addZero(minute) + ":" + addZero(second); // 时间格式化为 0000-00-00 00:00:00
    document.getElementById("time").innerHTML = time; // 将时间显示在页面上
}

// 补零函数
function addZero(num) {
    if(num < 10) {
        return "0" + num;
    }
    return num;
}

// 定时器，每秒更新一次时间
setInterval(showTime, 1000);

在这个示例代码中，我们首先定义了一个名为“showTime()”的函数，用于获取并格式化当前时间，并将其显示在页面上。我们使用JS的Date对象来获取当前时间，然后使用一系列的“get”函数来获取不同的时间单位。我们将各个时间单位拼接后，格式化成为“0000-00-00 00:00:00”这样的样式，最后将其显示在页面上。

当然，为了让时间更加美观，我们编写了一个名为“addZero()”的函数，用于补零。如果当前时间不足10，就在前面加上一个0，例如“09”，否则直接返回时间。

最后，我们使用JS的定时器函数setInterval()，每秒钟调用一次showTime()函数，实现更新时间的效果。

三、完整示例说明

下面给出两个完整的示例，分别演示如何应用动态时间显示在不同的场景中。

示例一：页面头部时间显示

这个示例演示了如何在网页头部显示当前时间。以下是HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>页面头部时间显示</title>
    <style type="text/css">
        .header {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Welcome to My Website!</h1>
        <p>The current time is <span id="time"></span>.</p>
    </div>
    <script src="time.js"></script>
</body>
</html>

在这个示例中，我们使用了一个类名为“header”的div容器，用于网页头部的显示。我们在这个容器中添加了一个欢迎语句和一个用于显示时间的span标签，将其id设置为“time”。使用CSS控制样式。

使用上面的代码示例中的JS文件，即可实现页面头部的动态时间显示。

示例二：倒计时

这个示例演示了如何使用动态时间显示实现一个简单的倒计时功能。以下是HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>倒计时</title>
</head>
<body>
    <h1>倒计时: <span id="countdown">60</span>秒</h1>
    <script src="time.js"></script>
</body>
</html>

在这个示例中，我们使用了一个h1标签，用于显示倒计时信息。我们也使用了一个用于显示剩余时间的span标签，将其id设置为“countdown”，初始值为“60”。

下面是JS文件的完整代码：

// 获取并显示倒计时
function showCountdown() {
    var countdown = document.getElementById("countdown"); // 获取倒计时元素
    var time = parseInt(countdown.innerHTML); // 获取当前时间
    if(time > 0) {
        countdown.innerHTML = time - 1; // 更新倒计时
    } else {
        countdown.innerHTML = "Time's up!"; // 倒计时结束
        clearInterval(timer); // 停止定时器
    }
}

// 定时器，每秒更新一次倒计时
var timer = setInterval(showCountdown, 1000);

在这个代码中，我们定义了一个名为“showCountdown()”的函数，用于获取并更新倒计时。我们首先使用document.getElementById()函数获取到倒计时元素，然后使用parseInt()函数将其转换为整数类型，以便于在后续操作中进行减法运算。如果当前倒计时时间还不为0，就将其减1，并更新页面上的元素；否则显示时间结束信息，并停止定时器。

最后，我们使用JS的定时器函数setInterval()，每秒钟调用一次showCountdown()函数，实现倒计时的功能。