hao模板页脚时间加载小bug解决

原有的逻辑判断是如果当前的时间<=18或>=9点更新图片

然后放在一个函数里去做，用一个id为 workboard 的div去做html更新

每秒钟更新一次，

会出现一个问题，下图这个图片也会每秒钟加载一次（关闭缓存就会出现一直刷图片的问题，虽然无关大雅）

解决方案

此方法不修改原有逻辑，仅把原有逻辑细分成两块，图片与时间单独，

时间依旧是1秒更新一次

图片嵌套一个时间判断

是每秒进行一次当前是否是上班时间的判断

如果当前的时间<=18或>=9点

通过后在去判断使用那种图片，

修改原有html结构

1panel上的目录，修改行数72行html结构

/opt/1panel/apps/halo/"你halo的目录"/data/themes/theme-hao/templates/modules/footer.html
<div th:if="${theme.config.footer.footerContent.style_one.runtime_enable}" id="workboard">
        <div id="workboard_img">
        </div>
        <div id="runtimeTextTip">

        </div>
    </div>

原来是这个样子的

修改后的

替换js代码

1panel上的目录

/opt/1panel/apps/halo/"你halo的目录"/data/themes/theme-hao/templates/modules/common/footer-style-one.html

修改后的代码，直接替换所有

<script th:if="${theme.config.footer.footerContent.style_one.runtime_enable}" async="async">(function () {
    var grt = new Date("[[${#strings.arraySplit(theme.config.basics.siteStartTime, '-')[1]}]]/[[${#strings.arraySplit(theme.config.basics.siteStartTime, '-')[2]}]]/[[${#strings.arraySplit(theme.config.basics.siteStartTime, '-')[0]}]] 00:00:00"); //设置网站上线时间
    var now = new Date();
    var dnum;
    var hnum;
    var mnum;
    var snum;
    var nowHour;
    var t;
    var n;
    var lastWorkTimeStatus = "";

    // 计算并更新天数、小时数、分钟数和秒数
    function updateTime() {
        now = new Date(); // 更新 now 的值
        nowHour = now.getHours(); // 更新 nowHour 的值
        var days = (now - grt) / 1000 / 60 / 60 / 24;
        dnum = Math.floor(days);
        var hours = (now - grt) / 1000 / 60 / 60 - 24 * dnum;
        hnum = Math.floor(hours);
        if (String(hnum).length == 1) {
            hnum = "0" + hnum;
        }
        var minutes = (now - grt) / 1000 / 60 - 24 * 60 * dnum - 60 * hnum;
        mnum = Math.floor(minutes);
        if (String(mnum).length == 1) {
            mnum = "0" + mnum;
        }
        var seconds = (now - grt) / 1000 - 24 * 60 * 60 * dnum - 60 * 60 * hnum - 60 * mnum;
        snum = Math.round(seconds);
        if (String(snum).length == 1) {
            snum = "0" + snum;
        }
        t = Math.trunc(234e8 + (now - grt) / 1e3 * 17)
        n = (t / 1496e5).toFixed(6)
    }

    // 更新网页中显示的网站运行时间
    function updateHtml() {
        const footer = document.getElementById("footer");
        if (!footer) return
        let currentTimeHtml = "";
        if (document.getElementById("runtimeTextTip")) {
          // 构造当前时间的 HTML 内容
          currentTimeHtml =
            `本站居然运行了 ${dnum} 天<span id='runtime'> ${hnum} 小时 ${mnum} 分 ${snum} 秒 </span>
              <i class='haofont hao-icon-heartbeat' style='color:red'></i> 
              <br> 旅行者 1 号当前距离地球 ${t} 千米，约为 ${n} 个天文单位 🚀`;
          document.getElementById("runtimeTextTip").innerHTML = currentTimeHtml;
        }
      }
  
      // 更新网页中的图片和描述，只在工作时间状态变化时更新
      function updateHtml_img() {
        // 判断当前是否为工作时间（9:00 - 18:00）
        let img = "";
        let description = "";
        let currentWorkTimeStatus = (nowHour < 18 && nowHour >= 9) ? "work" : "offduty";
        // 如果工作时间状态发生变化，才更新
        if (currentWorkTimeStatus !== lastWorkTimeStatus) {
          if (currentWorkTimeStatus === "work") {
            img = "[(${theme.config.footer.footerContent.style_one.work_img})]";
            description = "[(${theme.config.footer.footerContent.style_one.work_description})]";
          } else {
            img = "[(${theme.config.footer.footerContent.style_one.offduty_img})]";
            description = "[(${theme.config.footer.footerContent.style_one.offduty_description})]";
          }
  
          if (document.getElementById("workboard_img")) {
            // 构造当前时间的 HTML 内容
            let currentTimeHtml =
              `<img class="workSituationImg boardsign" src="${img}" alt="${description}" title="${description}">`;
            document.getElementById("workboard_img").innerHTML = currentTimeHtml;
          }
          // 更新 lastWorkTimeStatus 为当前状态
          lastWorkTimeStatus = currentWorkTimeStatus;
        }
      }
  
      // 设置定时器每秒钟更新一次运行时间和网页内容
      setInterval(() => {
        updateTime(); // 更新时间
        updateHtml(); // 更新网页中的时间
        updateHtml_img(); // 更新网页中的图片和描述（只在状态变化时）
      }, 1000); // 每秒执行一次
    })();
  </script>

新增全局变量lastWorkTimeStatus 最后状态修改逻辑为更新html和更新图片

时间单独更新，图片单独更新

新增变量CurrentWorkTimeStatus 当前上班状态，根据时间来判断后赋值

判断嵌套当前的状态，通过后在根据状态加载对应图片