js 日期加红代码 适用于各种cms 原创

进入正题。

JS 日期加红代码 适用于各种CMS 原创攻略

在网页开发中，有时需要将某些日期信息突出显示，以便读者更加方便地理解。这时候可以用 js 代码来实现日期加红这个效果。

实现方法

具体的实现方法是通过 JavaScript 获取网页上的日期信息，然后判断日期是否以当前日期为基准进行标红处理。

下面是关键的 JavaScript 代码：

<script type="text/javascript">
  var dates = document.getElementsByTagName("time");
  var today = new Date();
  for (var i = 0; i < dates.length; i++) {
    var date = new Date(dates[i].getAttribute("datetime"));
    if (
      date.getDate() == today.getDate() &&
      date.getMonth() == today.getMonth() &&
      date.getFullYear() == today.getFullYear()
    ) {
      dates[i].style.color = "red";
    }
  }
</script>

上面代码中，我们获取了网页上所有的 time 标签，然后遍历每个 time 标签，将其日期与当前日期进行比较，如果日期相同就设置标签文字颜色为红色。

示例说明1

假设今天是 2021 年 9 月 8 日，我们要将 2021 年 9 月 8 日这个日期标红，那么我们可以在 HTML 中这样写：

Today is <time datetime="2021-09-08">2021-09-08</time>.

当然，也可以将 datetime 属性中的日期动态生成，如下：

Today is <time datetime="2021-09-08" id="today"></time>.

然后在 JavaScript 中获取当前日期并设置到 today 标签中：

<script type="text/javascript">
  var today = new Date();
  var todayTag = document.getElementById("today");
  todayTag.setAttribute(
    "datetime",
    today.getFullYear() +
      "-" +
      (today.getMonth() + 1).toString().padStart(2, "0") +
      "-" +
      today.getDate().toString().padStart(2, "0")
  );
</script>

然后再使用上面的 JavaScript 代码将日期标红即可。

示例说明2

有时候我们需要将某个具体日期标红，比如 2021 年 10 月 1 日，那么我们可以这样写：

National Day is <time datetime="2021-10-01">October 1</time>.

然后使用上面的 JavaScript 代码将日期标红即可。

结语

通过上述两个示例，我们可以看到将网页上的日期信息标红是非常简单的。该方法适用于大部分 CMS 系统，只需要将 JS 代码插入到 HTML 模板中即可。