Sun-Panel YM-NAV 自定义css js 源码思路

[hslr-s]

欢迎大家有教程的可以来社区分享~

博客作者：YM(与末)

教程地址：博客教程

效果：

_2024_01_31_10_22_04_250.mp4

[WYithal]

又重新让GPT写了个，感觉这个代码更好，一句一个注释🤣
index.js:

// 定义一个函数，用来获取一言和它的出处
function getHitokoto() {
  // 创建一个XMLHttpRequest对象
  var xhr = new XMLHttpRequest();

  // 设置请求的URL和方法
  xhr.open("GET", "https://v1.hitokoto.cn/?encode=json");

  // 设置请求完成后的回调函数
  xhr.onload = function() {
    // 如果响应状态码为200，表示成功
    if (xhr.status == 200) {
      // 将响应文本转换为JS对象
      var data = JSON.parse(xhr.responseText);

      // 提取hitokoto和from参数的内容
      var hitokoto = data.hitokoto;
      var from = data.from;

      // 获取HTML代码中的元素，假设有id为hitokoto和from的元素
      var hitokotoElement = document.getElementById("hitokoto");
      var fromElement = document.getElementById("from");

      // 将内容插入到元素中
      hitokotoElement.innerHTML = "『" + hitokoto + "』";
      fromElement.innerHTML = "——「" + from + "」";
    }
  };

  // 发送请求
  xhr.send();
}

// 当页面加载完成后，执行以下代码
window.onload = function() {
  // 调用一次getHitokoto函数，获取初始的内容
  getHitokoto();

  // 设置一个定时器，每隔10分钟调用一次getHitokoto函数
  setInterval(getHitokoto, 10 * 60 * 1000);
};

自定义页脚(还是GPT写的🤣)：

<div>
    <b><i id="hitokoto"></i></b>
    <b><i id="from"></i></b>
</div>

然后index.css要改改，我用的上面作者发的

.footer {
  color: #fff;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px;
  width: 100%;
  height: auto;
  min-height: 50px;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  line-height: 1.8;
  pointer-events: none;
}

实际效果：

[docker-master]

所以放在自定义页脚里面吗，这个效果？？？

[WYithal]

所以放在自定义页脚里面吗，这个效果？？？

啊？自定义页脚放HTML代码的，JS代码得放index.js里，你可以看下作者的文档