如何在JavaScript中克隆并修改内容，实现从*96到*01每日依次展示新数字

实现思路 #

• 不用预先编写全部96个DOM元素，通过克隆初始*96元素动态生成需要展示的节点
• 用本地存储localStorage记录倒计时起始日期，避免刷新页面重置计数
• 计算当前日期与起始日期的自然天差值，自动匹配需要展示到哪一个数字（从96往下递推，最小到01）
• 生成对应数量的元素并依次追加展示，符合次日新增一个数字的需求

调整后代码 #

HTML部分 #

<div class="content">
  <!-- 仅保留初始模板元素，设置为隐藏 -->
  <a class="days day-template" style="display:none;">
    *96
  </a>
</div>

JS部分 #

$(document).ready(function(){
  // 存储键名，用于记录起始日期
  const STORAGE_KEY = 'countdown_start_date';
  // 倒计时最大值、最小值
  const MAX_NUM = 96;
  const MIN_NUM = 1;

  // 读取或初始化起始日期，存储格式为YYYY-MM-DD
  let startDate = localStorage.getItem(STORAGE_KEY);
  if (!startDate) {
    startDate = new Date().toISOString().split('T')[0];
    localStorage.setItem(STORAGE_KEY, startDate);
  }

  // 计算当前日期与起始日期的自然天差值
  const start = new Date(startDate);
  const now = new Date();
  const diffTime = Math.abs(now - start);
  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));

  // 计算当前需要展示到的数字
  const currentShowNum = Math.max(MIN_NUM, MAX_NUM - diffDays);

  // 循环生成需要展示的元素
  const $template = $('.day-template');
  const $content = $('.content');
  for (let num = MAX_NUM; num >= currentShowNum; num--) {
    // 克隆模板元素
    const $newDay = $template.clone();
    // 补零处理，比如1转为01
    const formatNum = String(num).padStart(2, '0');
    // 修改元素内容和类名，移除隐藏样式
    $newDay.removeClass('day-template')
      .addClass(`day-${formatNum}`)
      .text(`*${formatNum}`)
      .show();
    // 追加到容器
    $content.append($newDay);
  }
});

效果说明 #

• 首次打开页面时会展示96，之后每过一个自然日自动追加展示下一个更小的数字，直到展示到01为止
• 页面刷新不会重置计数，只要是同一设备同一浏览器，都会按照首次打开的日期持续计数
• 如果需要重置倒计时，清除浏览器本地存储里的countdown_start_date字段即可

内容的提问来源于stack exchange，提问作者monir