Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
使用JavaScript将相对日期转换为绝对时间戳的教程_创想鸟
原创投稿
  1. 创想鸟首页
  2. 用户投稿

使用JavaScript将相对日期转换为绝对时间戳的教程

程序猿 • • 用户投稿

使用javascript将相对日期转换为绝对时间戳的教程

本教程详细介绍了如何利用JavaScript，将网页中显示的相对日期（如“X月Y天前”）动态转换为其对应的绝对时间戳。通过解析HTML元素的data属性，我们可以轻松获取隐藏的精确日期信息，并通过简单的DOM操作更新页面显示，从而提升用户体验和数据可读性。

在现代Web应用中，为了提供更友好的用户体验，日期和时间常常以相对形式（例如“3天前”、“2小时前”）显示。然而，在某些场景下，用户可能需要查看精确的绝对时间戳，以便进行数据分析或历史追溯。幸运的是，许多开发者在HTML结构中预留了这些精确数据，通常存储在元素的data属性中。本教程将指导您如何使用JavaScript动态地将页面上显示的相对日期转换为其对应的绝对时间戳。

识别目标元素与数据源

首先，我们需要识别包含相对日期和绝对时间戳的HTML元素。通常，相对日期会作为元素的文本内容显示，而绝对时间戳则隐藏在同一个元素的自定义data属性中。

考虑以下常见的HTML结构示例：

立即学习“Java免费学习笔记（深入）”；

      9 mo 10 days -    #2170

在这个例子中：

元素是我们的目标。显示的相对日期是 ” 9 mo 10 days -“，它位于 元素的第一个文本节点中。精确的绝对时间戳 2021-12-17T06:32:13Z 存储在 元素的 data 属性中。

我们的目标是提取 data 属性的值，并用它替换掉

元素的相对日期文本。

实现JavaScript转换逻辑

要实现这一转换，我们可以编写一个简单的JavaScript函数。该函数将执行以下步骤：

选择目标HTML元素。从该元素中获取 data 属性的值。更新元素的文本内容，将其替换为获取到的时间戳。

以下是一个实现此功能的JavaScript函数示例：

/** * 替换指定单元格中的相对日期为data属性中的绝对时间戳。 *  * @param {string} selector 用于选择目标HTML元素的CSS选择器。 */function replaceRelativeDateWithTimestamp(selector) {  // 1. 使用querySelector选择第一个匹配的元素  // 注意：在实际应用中，建议使用更具体的选择器（如ID或类）以避免误选。  let targetCell = document.querySelector(selector);  // 2. 检查元素是否存在，防止运行时错误  if (targetCell) {    // 3. 获取data属性的值    const timestamp = targetCell.getAttribute('data');    // 4. 检查data属性是否存在    if (timestamp) {      // 5. 更新元素的第一个文本节点的内容      // firstChild通常指向元素内的第一个文本节点或子元素。      // 对于本例，' 9 mo 10 days -'是第一个文本节点。      targetCell.firstChild.data = timestamp + ' - ';      console.log(`日期已更新为: ${timestamp}`);    } else {      console.warn(`元素 ${selector} 没有 'data' 属性。`);    }  } else {    console.warn(`未找到匹配选择器 ${selector} 的元素。`);  }}

结合HTML进行演示

为了演示上述函数的效果，我们可以创建一个包含示例HTML和触发转换的按钮：

        相对日期转绝对时间戳            table, th, td {            border: 1px solid #ccc;            border-collapse: collapse;            padding: 8px;        }        button {            margin-top: 15px;            padding: 10px 20px;            cursor: pointer;        }        
日期显示转换示例
    
                    
                构建日期            
                            
                                    9 mo 10 days -                    #2170                            
            
                                    1 year 3 months ago -                    #1001                            
            
                                    This cell has no data attribute.                            
            
    
                // 上面定义的 replaceRelativeDateWithTimestamp 函数        function replaceRelativeDateWithTimestamp(selector) {          let targetCells = document.querySelectorAll(selector); // 使用querySelectorAll处理多个元素          targetCells.forEach(targetCell => {            if (targetCell) {              const timestamp = targetCell.getAttribute('data');              if (timestamp) {                // 确保只修改第一个文本节点，避免影响标签                let firstTextNode = Array.from(targetCell.childNodes).find(node => node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() !== '');                if (firstTextNode) {                    firstTextNode.data = timestamp + ' - ';                } else {                    // 如果没有文本节点，直接设置innerText或textContent                    targetCell.textContent = timestamp + ' - ' + targetCell.textContent.replace(/s*-s*/, ''); // 保留原有链接文本                }                console.log(`日期已更新为: ${timestamp}`);              } else {                console.warn(`元素 ${selector} 没有 'data' 属性。`);              }            } else {              console.warn(`未找到匹配选择器 ${selector} 的元素。`);            }          });        }

在上述代码中，我们对 replaceRelativeDateWithTimestamp 函数进行了优化，使其能够处理多个匹配的元素（通过 querySelectorAll 和 forEach 循环），并且更健壮地查找和修改第一个非空文本节点，以避免意外删除或修改子元素（如 标签）。

注意事项与最佳实践

选择器的精确性： 在实际项目中，使用 document.querySelector(‘td’) 这样的通用选择器可能过于宽泛，容易选择到错误的元素。强烈建议使用更具体的选择器，如ID (#job-id-cell) 或特定的类名 (.build-date-cell)，以确保只操作目标元素。处理多个元素： 如果页面上有多个需要转换的日期，应使用 document.querySelectorAll() 获取所有匹配的元素，然后遍历它们并逐一进行转换。DOM结构复杂性： 如果目标 元素内部包含其他子元素（如 标签），直接修改 cell.firstChild.data 可能不是最佳选择。firstChild 仅指向第一个子节点，如果第一个子节点不是文本节点，或者您想保留其他子元素，则需要更精细的DOM操作，例如遍历 childNodes 找到文本节点，或者使用 textContent 但要注意可能覆盖所有内容。本教程的优化版本已考虑到这一点。错误处理： 在尝试访问元素的属性或修改其内容之前，始终检查元素是否存在 (if (targetCell)) 以及属性是否存在 (if (timestamp))，可以有效避免运行时错误。性能考虑： 对于包含大量日期需要转换的复杂页面，频繁的DOM操作可能会影响页面性能。在这种情况下，可以考虑使用虚拟DOM库（如React, Vue）或批量更新DOM，但对于大多数常见场景，上述方法已足够高效。用户体验： 考虑在转换完成后，是否需要提供视觉反馈，例如改变字体颜色或添加工具提示，以告知用户日期已更新。

总结

通过利用HTML元素的 data 属性和简单的JavaScript DOM操作，我们可以有效地将网页中显示的相对日期动态转换为精确的绝对时间戳。这种方法不仅提升了数据可读性，也为用户提供了更丰富的信息。遵循本文提供的示例和最佳实践，您可以轻松地将此功能集成到您的Web应用中。

以上就是使用JavaScript将相对日期转换为绝对时间戳的教程的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1598822.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
如何通过PHP钩子向WooCommerce商店页面注入自定义HTML（如模态框）
上一篇 2025年12月23日 13:15:47
精确控制CSS ::after伪元素与内容之间的间距
下一篇 2025年12月23日 13:16:05

相关推荐

  • 如何利用蝴蝶号自动直播间打造被动收入系统

    如何利用蝴蝶号自动直播间打造被动收入系统如何利用蝴蝶号自动直播间打造被动收入系统如何利用蝴蝶号自动直播间打造被动收入系统如何利用蝴蝶号自动直播间打造被动收入系统

    要打造蝴蝶号自动直播间实现被动收入，核心在于用预设内容和智能系统替代真人出镜，构建低干预、可持续的流量转化模式。1.内容策略上选择“长寿型”内容，如软件教程、助眠音频、产品演示，并设计循环播放逻辑；2.技术搭建时优化互动设置，嵌入商品链接与自动弹幕，提升直播间活性；3.多渠道引流，结合短视频与社交媒…

    程序猿的头像 程序猿
    2026年9月21日 • 用户投稿
    000

  • MySQL用户权限体系配置思路_Sublime中编辑多用户分权管理脚本

    MySQL用户权限体系配置思路_Sublime中编辑多用户分权管理脚本MySQL用户权限体系配置思路_Sublime中编辑多用户分权管理脚本MySQL用户权限体系配置思路_Sublime中编辑多用户分权管理脚本MySQL用户权限体系配置思路_Sublime中编辑多用户分权管理脚本

    最小权限原则是mysql用户权限配置的核心，确保每个用户仅拥有必要权限以提升安全性与可维护性。1.明确需求：根据用户角色分配如只读、增删改查或结构修改权限；2.创建用户并编写sql脚本进行权限管理，替代手动输入命令，提高效率与一致性；3.使用sublime text等编辑器提升脚本编写效率，利用语法…

    程序猿的头像 程序猿
    2026年9月21日 • 用户投稿
    000
  • mac怎么在菜单栏显示日期_Mac菜单栏显示日期方法 用户投稿

    mac怎么在菜单栏显示日期_Mac菜单栏显示日期方法

    首先启用菜单栏时钟显示，进入系统设置→控制中心→日期与时间→开启“在菜单栏中显示”；接着在“桌面与程序坞”→“时钟”中勾选“显示日期”以显示星期和具体日期，可选开启24小时制或秒数；若设置未生效，可通过终端执行killall SystemUIServer命令强制刷新菜单栏。 如果您发现Mac的菜单栏…

    程序猿的头像 程序猿
    2026年9月21日
    200
  • 音乐文件占用空间太多怎么办_音乐文件占用空间太多如何整理详细指南 用户投稿

    音乐文件占用空间太多怎么办_音乐文件占用空间太多如何整理详细指南

    解决音乐文件占空间问题的关键是压缩与整理：先用软件或在线工具降低比特率压缩体积，再按场景分类、利用元数据自动归集，并通过听歌片段和BPM判断保留内容，避免重复与误删。 音乐文件占空间太多，核心解决办法就两条：一是压缩单个文件体积，二是通过有效分类管理提升使用效率。直接删歌不是长久之计，学会整理和优化…

    程序猿的头像 程序猿
    2026年9月21日
    000
  • Via浏览器在鸿蒙系统上运行会闪退怎么办_Via浏览器鸿蒙系统闪退的解决方法 用户投稿

    Via浏览器在鸿蒙系统上运行会闪退怎么办_Via浏览器鸿蒙系统闪退的解决方法

    Via浏览器闪退可依次尝试清除缓存数据、更新或重装应用、检查系统更新与存储空间、禁用硬件加速功能，必要时通过开发者模式启用USB调试并使用DevEco Studio捕获日志定位问题。 如果您在使用Via浏览器访问网页时，应用突然关闭或无法正常启动，则可能是由于软件兼容性或系统资源问题导致。以下是解决…

    程序猿的头像 程序猿
    2026年9月21日
    300

  • 升级X86架构性能大提升！极空间Z2 Ultra图赏

    升级X86架构性能大提升！极空间Z2 Ultra图赏升级X86架构性能大提升！极空间Z2 Ultra图赏升级X86架构性能大提升！极空间Z2 Ultra图赏升级X86架构性能大提升！极空间Z2 Ultra图赏

    10月23日，极空间正式推出全新双盘位nas产品——极空间z2 ultra，官方售价为1899元，参与国家补贴后仅需1457元，性价比进一步提升。 此次发布的Z2 Ultra最大的亮点在于采用X86架构处理器，相较以往使用的ARM平台，性能实现飞跃式提升，运行速度显著加快。更重要的是，新架构对Doc…

    程序猿的头像 程序猿
    2026年9月21日 • 用户投稿
    200
  • 抖音电商与独立商城怎么结合？流量互通与转化全攻略 用户投稿

    抖音电商与独立商城怎么结合？流量互通与转化全攻略

    许多自建电商平台的运营者正积极探索与抖音电商的合作路径，以期借助其庞大的用户基数实现流量增长和销售转化提升。虽然抖音能为独立商城导入可观的新用户，但要真正实现高效联动，必须依赖技术系统的深度对接与精准的内容运营策略。以下是抖音与独立商城融合的关键路径及实操建议。 如何实现抖音与独立商城的店铺互通？ …

    程序猿的头像 程序猿
    2026年9月21日
    100
  • 如何在Java中实现个人财务管理工具 用户投稿

    如何在Java中实现个人财务管理工具

    首先设计Transaction、FinanceManager和Budget核心类，实现交易记录、统计分析与预算控制功能，通过ArrayList管理数据，使用LocalDate处理日期，结合ObjectOutputStream持久化存储，初期采用Scanner构建控制台菜单实现增删查改与报表展示，后期…

    程序猿的头像 程序猿
    2026年9月21日
    000

  • Linux目录结构学习常见问题汇总

    Linux目录结构学习常见问题汇总Linux目录结构学习常见问题汇总Linux目录结构学习常见问题汇总Linux目录结构学习常见问题汇总

    Linux只有一个根目录，所有设备挂载于此，形成统一树状结构。根目录下各路径分工明确：/bin和/sbin分别存放用户与管理员命令；/etc集中配置文件；/home为用户家目录；/var存储日志等动态数据；/tmp用于临时文件；/usr存放系统程序，/usr/local供手动安装软件；/dev包含设…

    程序猿的头像 程序猿
    2026年9月21日 • 用户投稿
    000
  • VSCode的代码折叠功能好用吗？ 用户投稿

    VSCode的代码折叠功能好用吗？

    VSCode代码折叠功能支持多种方式：点击箭头、快捷键、命令面板及按区域类型折叠；可自定义基于缩进的折叠、默认层级和提示装饰器；集成语言服务后能智能识别JSX、Vue组件等结构，提升大型文件编辑效率。 VSCode 的代码折叠功能非常实用，尤其在处理大型文件或复杂结构时能显著提升阅读和编辑效率。 支…

    程序猿的头像 程序猿
    2026年9月21日
    100
  • win10无法创建新的分区提示空间不足怎么办 _Win10 无法创建分区空间不足解决方法 用户投稿

    win10无法创建新的分区提示空间不足怎么办 _Win10 无法创建分区空间不足解决方法

    首先检查磁盘是否存在未分配空间，若无则通过压缩卷释放空间；使用磁盘管理或第三方工具如EaseUS创建新分区；必要时清理磁盘或转换MBR为GPT格式以突破分区限制。 如果您在使用Windows 10系统时尝试创建新的磁盘分区，但系统提示“无法创建新分区”或“空间不足”，这通常是因为当前磁盘未分配的空间…

    程序猿的头像 程序猿
    2026年9月21日
    100
  • X旗下Grok上线即时语音搜索，挑战Google引领搜索新方向 用户投稿

    X旗下Grok上线即时语音搜索，挑战Google引领搜索新方向

    近日，x平台旗下的ai助手grok正式推出了“即时语音搜索”功能。用户现在可以通过语音直接提问，触发实时网页检索，并迅速获得整合后的精准答案。此举意在优化信息获取流程，推动人机交互向更自然、高效的方向演进。 该语音搜索模式实现了“即说即搜即答”的流畅体验。例如，当用户提出“星舰发射的具体时间是什么？…

    程序猿的头像 程序猿
    2026年9月21日
    100
  • Linux中如何查看进程状态_Linux进程状态查看的详细方法 用户投稿

    Linux中如何查看进程状态_Linux进程状态查看的详细方法

    掌握Linux进程查看方法可高效管理程序，常用ps aux或ps -ef查看进程快照，top和htop实时监控，/proc/PID/目录下获取详细状态，pgrep和pidof快速定位PID。 在Linux系统中，查看进程状态是系统管理和故障排查中的基本操作。掌握多种方法可以更高效地监控和管理运行中的…

    程序猿的头像 程序猿
    2026年9月21日
    1200
  • Laravel 8 登录后重定向到仪表盘的全面指南 用户投稿

    Laravel 8 登录后重定向到仪表盘的全面指南

    本文深入探讨了 Laravel 8 中用户登录后重定向到仪表盘的多种策略。我们将详细解析默认的重定向机制，包括 LoginController 和 RedirectIfAuthenticated 中间件，并重点介绍如何通过自定义登录逻辑实现精确的重定向控制，同时提供示例代码和常见问题排查建议，确保用…

    程序猿的头像 程序猿
    2026年9月21日
    000
  • iPhone 17如何设置隐私共享限制 用户投稿

    iPhone 17如何设置隐私共享限制

    答案：通过设置隐私权限、关闭iCloud同步、退出家人共享及限制锁屏访问，可有效保护iPhone数据隐私。具体包括管理相机、麦克风、定位等权限，关闭不必要的iCloud数据同步，退出家庭共享群组，停用跨App内容共享，并在锁屏时禁用控制中心与通知预览，防止信息泄露。 虽然目前还没有iPhone 17…

    程序猿的头像 程序猿
    2026年9月21日
    500
  • Guava Multimap：高效获取并打印指定键的所有关联值 用户投稿

    Guava Multimap：高效获取并打印指定键的所有关联值

    guava multimap是处理一键多值映射关系的强大工具。要获取特定键的所有关联值，应直接使用其提供的`multimap#get(k)`方法。该方法会返回一个包含所有匹配值的`collection`，即使键不存在，也会返回一个空集合而非`null`，从而简化了值检索和空值处理逻辑，是比手动迭代键…

    程序猿的头像 程序猿
    2026年9月21日
    000
  • 控制台命令（Console Command）开发 用户投稿

    控制台命令（Console Command）开发

    控制台命令是程序员日常工作中不可或缺的工具，它提高了开发效率并帮助理解和控制程序运行。1) 通过简单的文本输入，完成复杂任务，如文件管理和系统监控。2) 控制台命令可用于快速调试、测试代码和自动化重复工作。3) 开发控制台命令时需注意安全性和兼容性问题。4) 控制台命令可实现有趣功能，如监控服务器资…

    程序猿的头像 程序猿
    2026年9月21日
    100
  • 如何在抖音有赞中查询订单号？——详解操作步骤 用户投稿

    如何在抖音有赞中查询订单号？——详解操作步骤

    文章正文： 一、抖音有赞简介 抖音有赞是由抖音与有赞科技联合推出的电商服务工具，专为商家提供一站式的销售管理解决方案。通过这一平台，商家能够高效处理商品上架、订单管理等环节，消费者也能便捷地查看自己的购买记录和订单状态。 二、订单号查询方法 启动抖音应用，切换至底部导航中的“我”，然后选择“已购”入…

    程序猿的头像 程序猿
    2026年9月21日
    100
  • 链路追踪（OpenTelemetry/Jaeger）集成 用户投稿

    链路追踪（OpenTelemetry/Jaeger）集成

    要将opentelemetry和jaeger集成到java应用中，需按以下步骤操作：1.配置jaeger exporter，2.初始化opentelemetry，3.创建并管理span。通过这种方式，你可以有效地追踪和分析微服务间的调用链路，提升系统性能。 在现代微服务架构中，链路追踪已经成为诊断和…

    程序猿的头像 程序猿
    2026年9月21日
    000
  • Linux如何恢复被删除的用户数据 用户投稿

    Linux如何恢复被删除的用户数据

    恢复Linux被删数据需立即停用磁盘并使用photorec或extundelete等工具，结合快照或备份可提高恢复成功率。 恢复Linux中被删除的用户数据，并非易事，但并非完全不可能。可能性取决于数据被删除的方式、删除后系统是否被继续使用，以及是否采取了合适的预防措施。核心在于理解数据删除的机制，…

    程序猿的头像 程序猿
    2026年9月21日
    200

发表回复

登录后才能评论
关注微信