js实现倒计时及时间对象

下面是详细讲解“JS实现倒计时及时间对象”的完整攻略。

时间对象

在 JavaScript 中，可以使用内置的时间对象 Date 来处理日期和时间。所以，我们可以借助 Date 对象来实现倒计时。

获取当前时间

首先，我们需要获取当前的时间。使用 new Date() 可以获取当前的日期和时间。

let now = new Date(); // 获取当前时间
console.log(now); // 输出当前时间

获取指定时间

除了获取当前时间，还可以得到指定的时间。使用 new Date(year, month, date, hours, minutes, seconds, milliseconds) 可以创建一个日期时间对象，其中含有所指定的日期和时间值。

year：年份（四位数）
month：月份（从 0 开始计数）
date：日（一个月中的某一天）
hours：小时（0 - 23）
minutes：分钟（0 - 59）
seconds：秒（0 - 59）
milliseconds：毫秒（0 - 999）

let target = new Date(2022, 11, 31); // 指定 2022 年 12 月 31 日
console.log(target); // 输出指定时间

使用 getDate()、getMonth()、getFullYear()、getHours()、getMinutes()、getSeconds() 可以获取 Date 对象中的具体信息。

console.log(target.getDate()); // 输出指定时间的日
console.log(target.getMonth()); // 输出指定时间的月份
console.log(target.getFullYear()); // 输出指定时间的年份
console.log(target.getHours()); // 输出指定时间的小时
console.log(target.getMinutes()); // 输出指定时间的分钟
console.log(target.getSeconds()); // 输出指定时间的秒钟

倒计时

了解了时间对象的基本操作后，接下来我们就可以通过比较当前时间和指定时间的差值来实现倒计时了。

首先，获取指定的时间。然后，在每隔一秒钟中，获取一次当前的时间，并将其与指定时间相减。

let target = new Date(2022, 11, 31); // 指定 2022 年 12 月 31 日
let now = new Date(); // 获取当前时间
let leftTime = target - now; // 相差时间的毫秒数
console.log(leftTime); // 输出相差毫秒数

这样，我们就得到了当前时间和指定时间的毫秒级的时间差值，接着将其转换为页面上显示的形式。

秒数转换

将毫秒数转换为需要的形式，首先需要将毫秒数转换为秒数。然后将秒数转换为 小时:分钟:秒 的形式。

let leftTime = 123456789;
let totalSeconds = parseInt(leftTime / 1000); // 将毫秒数转换为秒数
let hour = parseInt(totalSeconds / 3600); // 小时数
let minute = parseInt(totalSeconds % 3600 / 60); // 分钟数
let second = parseInt(totalSeconds % 60); // 秒数
console.log(hour, minute, second); // 输出时、分、秒

时间格式化

得到时、分、秒后，将它们组合成我们需要的格式，即 hh:mm:ss。

使用字符串模板可以很方便的实现时间格式化。

let timeStr = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`;
console.log(timeStr); // 输出格式化后的时间

完整示例

下面是一个完整的实现倒计时的示例：

<!DOCTYPE html>
<html>
<head>
    <title>倒计时</title>
    <style>
        .countdown {
            font-size: 24px;
            font-weight: bold;
            color: red;
        }
    </style>
</head>
<body>
    <div class="countdown"></div>
    <script type="text/javascript">
        let countdownDOM = document.querySelector('.countdown');
        let target = new Date(2022, 11, 31); // 指定 2022 年 12 月 31 日

        setInterval(() => {
            let now = new Date(); // 获取当前时间
            let leftTime = target - now; // 相差时间的毫秒数

            let totalSeconds = parseInt(leftTime / 1000); // 将毫秒数转换为秒数
            let hour = parseInt(totalSeconds / 3600); // 小时数
            let minute = parseInt(totalSeconds % 3600 / 60); // 分钟数
            let second = parseInt(totalSeconds % 60); // 秒数

            let timeStr = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`;
            countdownDOM.innerHTML = timeStr;
        }, 1000);
    </script>
</body>
</html>

在这个示例中，我们在页面上显示了倒计时，使用了定时器来每秒更新一次，同时也实现了时间格式化，使得它更加易于阅读。

示例说明

这里再给出两个倒计时的示例。

示例一

要求倒计时 2 分钟，然后把 h1 标签内的文字改为 “Time is up”。

<!DOCTYPE html>
<html>
<head>
    <title>倒计时</title>
    <style>
        h1 {
            font-size: 36px;
            font-weight: bold;
            color: red;
        }
    </style>
</head>
<body>
    <h1>倒计时</h1>
    <script type="text/javascript">
        let countdownDOM = document.querySelector('h1');
        let target = new Date(); // 获取当前时间
        target.setMinutes(target.getMinutes() + 2); // 2 分钟后

        let countdownTimer = setInterval(() => {
            let now = new Date(); // 获取当前时间
            let leftTime = target - now; // 相差时间的毫秒数

            if (leftTime <= 0) { // 倒计时结束
                clearInterval(countdownTimer);
                countdownDOM.innerHTML = 'Time is up';
                return;
            }

            let totalSeconds = parseInt(leftTime / 1000); // 将毫秒数转换为秒数
            let minute = parseInt(totalSeconds / 60); // 分钟数
            let second = parseInt(totalSeconds % 60); // 秒数

            let timeStr = `${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`;
            countdownDOM.innerHTML = timeStr;
        }, 1000);
    </script>
</body>
</html>

示例二

要求倒计时 1 小时 30 分钟，然后在命令行输出 “Time is up”。

let target = new Date(); // 获取当前时间
target.setHours(target.getHours() + 1); // 1 小时后
target.setMinutes(target.getMinutes() + 30); // 再加 30 分钟

let countdownTimer = setInterval(() => {
    let now = new Date(); // 获取当前时间
    let leftTime = target - now; // 相差时间的毫秒数

    if (leftTime <= 0) { // 倒计时结束
        clearInterval(countdownTimer);
        console.log('Time is up');
        return;
    }

    let totalSeconds = parseInt(leftTime / 1000); // 将毫秒数转换为秒数
    let hour = parseInt(totalSeconds / 3600); // 小时数
    let minute = parseInt(totalSeconds % 3600 / 60); // 分钟数
    let second = parseInt(totalSeconds % 60); // 秒数

    let timeStr = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`;
    console.log(timeStr);
}, 1000);

以上就是实现倒计时及时间对象的完整攻略，希望可以帮助大家更好的了解和使用时间操作。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现倒计时及时间对象 - Python技术站