pbootcms获取详情页发布日期和现在日期之间的逐年日期

在 PBootCMS 中,如果你需要获取详情页的发布日期并与当前日期之间的逐年日期进行展示,可以使用 JavaScript 和 PBootCMS 的标签功能实现。下面是一个详细的示例,展示了如何实现这一功能。

示例代码

  1. HTML 结构

    • 包含一个用于展示逐年日期的 <p> 元素。
  2. JavaScript 逻辑

    • 获取当前年份和详情页的发布年份。
    • 循环生成逐年日期并展示。

详细步骤

1. HTML 结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>PBootCMS 逐年日期展示</title>
</head>
<body>
    <p id="history1"></p>

    <script>
        // 获取当前年份
        var currentYear = new Date().getFullYear();

        // 获取详情页的发布年份
        var publishYear = '{content:date style=Y}';

        // 初始化逐年日期的 HTML 内容
        var history1 = document.getElementById('history1');
        history1.innerHTML = '';

        // 循环生成逐年日期
        for (let i = currentYear; i >= publishYear; i--) {
            history1.innerHTML += `
                <li>
                    <span>${i}</span>-{content:date style=m-d}
                    <span><img src='pic.jpg'></span>
                </li>
            `;
        }
    </script>
</body>
</html>

详细解释

  1. 获取当前年份

    • 使用 JavaScript 的 Date 对象获取当前年份。
    javascript
     
    var currentYear = new Date().getFullYear();
  2. 获取详情页的发布年份

    • 使用 PBootCMS 的 {content:date style=Y} 标签获取详情页的发布年份。
    html
     
    var publishYear = '{content:date style=Y}';
  3. 初始化逐年日期的 HTML 内容

    • 初始化用于展示逐年日期的 <p> 元素的内容。
    javascript
     
    var history1 = document.getElementById('history1'); history1.innerHTML = '';
  4. 循环生成逐年日期

    • 从当前年份循环到详情页的发布年份,生成逐年日期并展示。
    javascript
     
    for (let i = currentYear; i >= publishYear; i--) { history1.innerHTML += ` <li> <span>${i}</span>-{content:date style=m-d} <span><img src='pic.jpg'></span> </li> `; }

调用标签

在 HTML 中,使用 <p> 元素作为容器,并为其分配一个 ID(例如 history1),以便 JavaScript 可以引用它:

html
 
<p id="history1"></p>
posted @   黄文Rex  阅读(43)  评论(0编辑  收藏  举报
(评论功能已被禁用)
相关博文:
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示