JavaScript时间戳获取及时间戳判断（同时设置不同的颜色。已开始的事件显示绿色，未开始的事件显示黑色，过去的事件显示灰色）

置顶入冉心

已于 2023-10-17 10:53:23 修改

阅读量777

点赞数 2

文章标签： javascript 开发语言 ecmascript

于 2023-10-17 10:46:31 首次发布

本文链接：https://blog.csdn.net/rr20060119/article/details/133878590

版权

时间戳是一个表示日期和时间的数字，通常是从某一参考日期（通常是1970年1月1日）到特定日期和时间之间的毫秒数。JavaScript中的时间戳通常是一个整数。

一、时间戳

1.获取时间戳

2.判断两个时间戳

二、下面是一个根据当前日期判断时间戳并以不同颜色表示时间的实例：

三、总结

一、时间戳

1.获取时间戳

代码如下（示例）：

const currentTimestamp = Date.now();
console.log(currentTimestamp); // 输出当前的时间戳，例如：1634376012345

2.判断两个时间戳

代码如下（示例）：

const timestamp1 = 1634376012345;
const timestamp2 = 1634376023456;

// 判断时间戳1是否在时间戳2之前
if (timestamp1 < timestamp2) {
    console.log("timestamp1 在 timestamp2 之前");
} else if (timestamp1 > timestamp2) {
    console.log("timestamp1 在 timestamp2 之后");
} else {
    console.log("timestamp1 和 timestamp2 相等");
}

// 计算两个时间戳之间的毫秒差异
const timeDifference = Math.abs(timestamp1 - timestamp2); // 使用Math.abs确保差异为正数
console.log(`时间戳之间的毫秒差异: ${timeDifference} 毫秒`);

二、下面是一个根据当前日期判断时间戳并以不同颜色表示时间的实例：

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .list-item {
            font-size: 18px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="app"></div>

    <script>
        // 创建假数据，包含开始时间和结束时间
        const data = [
            { name: 'Task 1', startTime: '2023-10-17 10:00:00', endTime: '2023-10-17 10:30:00' },
            { name: 'Task 2', startTime: '2023-10-17 10:35:00', endTime: '2023-10-17 13:30:00' },
            { name: 'Task 3', startTime: '2023-10-17 15:45:00', endTime: '2023-10-17 16:15:00' }
        ];

        const app = document.getElementById('app');

        // 获取当前时间戳
        const currentTimestamp = Date.now();

        // 遍历数据并渲染列表项
        data.forEach(item => {
            // 将开始时间和结束时间字符串转换为时间戳
            const startTime = new Date(item.startTime).getTime();
            const endTime = new Date(item.endTime).getTime();
            const listItem = document.createElement('div');

            if (currentTimestamp > endTime) {
                listItem.style.color = 'gray'; // 事件已结束，灰色
                listItem.textContent = `${item.name} - 事件已结束 - ${item.startTime} - ${item.endTime}`;
            } else if (currentTimestamp >= startTime) {
                listItem.style.color = 'green'; // 事件进行中，绿色
                listItem.textContent = `${item.name} - 事件进行中 - ${item.startTime} - ${item.endTime}`;
            } else {
                listItem.style.color = 'black'; // 事件未开始，黑色
                listItem.textContent = `${item.name} - 事件未开始 - ${item.startTime} - ${item.endTime}`;
            }

            app.appendChild(listItem);
        });
    </script>
</body>
</html>

上述代码根据不同的时间状态，列表项中显示不同的内容，同时设置不同的颜色。已开始的事件显示绿色，未开始的事件显示黑色，过去的事件显示灰色。

三、总结

时间戳是一个表示日期和时间的数值，通常以毫秒为单位，它表示自1970年1月1日午夜（UTC时间）以来经过的毫秒数。时间戳是计算机系统中用于记录和处理时间的一种常见方式。以下是关于时间戳的一些重要知识点：

获取时间戳：你可以使用编程语言中的日期和时间函数来获取当前时间戳，例如JavaScript中的Date.now()函数或其他编程语言中的等效函数。

时间戳的单位：时间戳通常以毫秒为单位（即千分之一秒），但有时也以秒为单位。需要根据编程语言和库的规定来确定时间戳的单位。

时间戳的用途：时间戳在各种应用中非常有用，包括：

记录事件的发生时间。
计算时间间隔和持续时间。
进行时间排序和比较。
在计时和定时任务中执行特定操作。
处理日期和时间的数学运算。

时间戳的比较：要比较两个时间戳，你可以直接比较它们的数值大小。较大的时间戳表示较晚的时间，较小的时间戳表示较早的时间。比较时间戳通常用于确定事件的顺序或计算时间间隔。

转换时间戳：如果需要将时间戳转换为可读的日期和时间格式，你可以使用编程语言中的日期和时间函数来进行转换。反之，如果你有日期和时间，也可以将它们转换为时间戳。

入冉心

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
JavaScript时间戳获取及时间戳判断（同时设置不同的颜色。已开始的事件显示绿色，未开始的事件显示黑色，过去的事件显示灰色）

时间戳是一个表示日期和时间的数值，通常以毫秒为单位，它表示自1970年1月1日午夜（UTC时间）以来经过的毫秒数。时间戳是计算机系统中用于记录和处理时间的一种常见方式。获取时间戳：你可以使用编程语言中的日期和时间函数来获取当前时间戳，例如JavaScript中的Date.now()函数或其他编程语言中的等效函数。时间戳的单位：时间戳通常以毫秒为单位（即千分之一秒），但有时也以秒为单位。需要根据编程语言和库的规定来确定时间戳的单位。时间戳的用途记录事件的发生时间。计算时间间隔和持续时间。
复制链接

扫一扫