子比主题美化-PC端底部显示网易云热评-极客源码

效果图

效果一

进入wordpress后台-外观-小工具-自定义html代码-所有页面底部全宽度

<div id="wniui-popup-window" class="wniui-show-popup-window">
  <div class="wniui-popup-header">
      <div class="wniui-popup-window-title">网易云热评</div>
      <span id="wniui-popup-username"></span>
      <a id="music-link" href="" target="_blank" style="position: absolute; top: 8px; right: 10px;">
          <svg style="transition: .3s;height:30px;width:30px;" t="1740280523955" class="icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22033"
              xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30">
              <path
                  d="M512.1 137.8c-206.4 0-373.7 167.3-373.7 373.7s167.3 373.7 373.7 373.7 373.7-167.3 373.7-373.7-167.3-373.7-373.7-373.7zM721 508.5L589.2 647c-9.9 10.4-27.4 3.4-27.4-11v-90.9h-1.4c-130.9 0-239.1 58.4-259.2 134.7h-2.3c12.8-133.2 125-237.4 261.5-237.4 0.5 0 0.9 0.1 1.4 0.1V359c0-14.4 17.5-21.4 27.4-11L721 486.6c5.8 6.2 5.8 15.8 0 21.9z"
                  fill="#231815" p-id="22034"></path>
          </svg>
      </a>
  </div>
  <div class="wniui-popup-window-divider"></div>
  <div class="wniui-popup-window-content">
  </div>
</div>

<style>
  #music-link:hover svg path {
  fill: #425AEF;
  transition: .3s;
}

  #wniui-popup-window {
      min-width: 300px;
      max-width: 500px;
      bottom: 20px;
      right: 20px;
      position: fixed;
      z-index: 1002;
      color: #363636;
      padding: 8px 16px;
      border-radius: 12px;
      transition: opacity 0.3s ease, transform 0.3s ease;
      background-color: rgba(255, 255, 255, 0.85);
      border: 1px solid #e3e8f7;
      max-height: 300px;
      opacity: 0;
      transform: translateY(20px);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
  }

  #wniui-popup-window.wniui-show {
      opacity: 1;
      transform: translateY(0);
  }

  #wniui-popup-header {
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;
  }

  #wniui-popup-window .wniui-popup-window-title {
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      line-height: 1;
      background: #363636;
      padding: 4px;
      border-radius: 4px;
      display: inline-block;
  }

  #wniui-popup-username {
      font-size: 12px;
      color: #666;
      line-height: 1;
      margin: 0;
      white-space: nowrap;
  }

  #wniui-popup-window .wniui-popup-window-divider {
      width: 100%;
      margin-top: 6px;
      border: 1px solid #e3e8f7;
  }

  #wniui-popup-window .wniui-popup-window-content {
      font-size: 15px;
      display: flex;
      justify-content: space-around;
      word-wrap: break-word;
      max-width: 450px;
      margin-top: 5px;
      overflow: auto;
  }

  #wniui-popup-window .wniui-popup-image {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 10px !important;
  }

  #wniui-popup-window .wniui-popup-window-content p {
      margin: 0;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
  }

  #wniui-popup-window:hover {
      border: 1px solid #425AEF;
  }

  #wniui-popup-window .wniui-popup-window-title:hover {
      background-color: #425AEF;
  }
</style>

<script>
async function fetchPopupContent() {
  if (window.innerWidth <= 768) {
      document.getElementById("wniui-popup-window").style.display = "none";
      return;
  } else {
      document.getElementById("wniui-popup-window").style.display = "flex";
  }

  try {
      const response = await fetch("https://www.wniui.com/api/music/index.php");
      const data = await response.json();
      const { musicLink, comments } = data;
      const { nickname, avatarUrl, content } = getRandomComment(comments);

      const popup = document.getElementById("wniui-popup-window");

      popup.classList.remove("wniui-show");

      setTimeout(() => {
          document.getElementById("wniui-popup-username").textContent = `- ${nickname}`;
          document.querySelector(".wniui-popup-window-content").innerHTML = `
              <div style="display: flex; align-items: center;">
                  <img src="${avatarUrl}" alt="头像" class="wniui-popup-image" />
                  <div><p>${content}</p></div>
              </div>
          `;

          const musicLinkElement = document.getElementById("music-link");
          musicLinkElement.href = musicLink;
          popup.classList.add("wniui-show");
      }, 300);

  } catch (error) {
      console.error("获取数据失败:", error);
  }
}

// 每 4 秒更新一次
fetchPopupContent();
setInterval(fetchPopupContent, 4000);

function getRandomComment(comments) {
  return comments[Math.floor(Math.random() * comments.length)];
}

</script>

效果二

<div id="wniui-popup-window" class="wniui-show-popup-window">
    <div class="wniui-popup-header">
        <div class="wniui-popup-window-title">网易云热评</div>
        <a id="music-link" href="" target="_blank" style="position: absolute; top: 4px; right: 10px;">
            <svg style="transition: .3s;height:30px;width:30px;" t="1740280523955" class="icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22033"
                xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30">
                <path
                    d="M512.1 137.8c-206.4 0-373.7 167.3-373.7 373.7s167.3 373.7 373.7 373.7 373.7-167.3 373.7-373.7-167.3-373.7-373.7-373.7zM721 508.5L589.2 647c-9.9 10.4-27.4 3.4-27.4-11v-90.9h-1.4c-130.9 0-239.1 58.4-259.2 134.7h-2.3c12.8-133.2 125-237.4 261.5-237.4 0.5 0 0.9 0.1 1.4 0.1V359c0-14.4 17.5-21.4 27.4-11L721 486.6c5.8 6.2 5.8 15.8 0 21.9z"
                    fill="#231815" p-id="22034"></path>
            </svg>
        </a>
    </div>
    <div class="wniui-popup-window-divider"></div>
    <div class="wniui-popup-window-content">
    </div>
  </div>
  
  <style>
    #music-link:hover svg path {
    fill: #425AEF;
    transition: .3s;
  }
  
    #wniui-popup-window {
        min-width: 300px;
        max-width: 500px;
        bottom: 20px;
        right: 20px;
        position: fixed;
        z-index: 1002;
        color: #363636;
        padding: 8px 16px;
        border-radius: 12px;
        transition: opacity 0.3s ease, transform 0.3s ease;
        background-color: rgba(255, 255, 255, 0.85);
        border: 1px solid #e3e8f7;
        max-height: 300px;
        opacity: 0;
        transform: translateY(20px);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
  
    #wniui-popup-window.wniui-show {
        opacity: 1;
        transform: translateY(0);
    }
  
    #wniui-popup-header {
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
    }
  
    #wniui-popup-window .wniui-popup-window-title {
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        line-height: 1;
        background: #363636;
        padding: 4px;
        border-radius: 4px;
        display: inline-block;
    }
  
    #wniui-popup-username {
        font-size: 12px;
        color: #666;
        line-height: 1;
        margin: 0;
        white-space: nowrap;
    }
  
    #wniui-popup-window .wniui-popup-window-divider {
        width: 100%;
        margin-top: 6px;
        border: 1px solid #e3e8f7;
    }
  
    #wniui-popup-window .wniui-popup-window-content {
        font-size: 15px;
        display: flex;
        justify-content: space-around;
        word-wrap: break-word;
        max-width: 450px;
        margin-top: 5px;
        overflow: auto;
    }
  
    #wniui-popup-window .wniui-popup-image {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px !important;
    }
  
    #wniui-popup-window .wniui-popup-window-content p {
        margin: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
    }
  
    #wniui-popup-window:hover {
        border: 1px solid #425AEF;
    }
  
    #wniui-popup-window .wniui-popup-window-title:hover {
        background-color: #425AEF;
    }
  </style>
  
  <script>
  async function fetchPopupContent() {
    if (window.innerWidth <= 768) {
        document.getElementById("wniui-popup-window").style.display = "none";
        return;
    } else {
        document.getElementById("wniui-popup-window").style.display = "flex";
    }
  
    try {
        const response = await fetch("https://www.wniui.com/api/music/index.php");
        const data = await response.json();
        const { musicLink, comments, songName } = data;
        const { content } = getRandomComment(comments);
  
        const popup = document.getElementById("wniui-popup-window");
  
        popup.classList.remove("wniui-show");
  
        setTimeout(() => {
            document.querySelector(".wniui-popup-window-content").innerHTML = `
                <div>
                    <p>${content} —— 网易云热评《${songName}》</p>
                </div>
            `;
  
            const musicLinkElement = document.getElementById("music-link");
            musicLinkElement.href = musicLink;
            popup.classList.add("wniui-show");
        }, 300);
  
    } catch (error) {
        console.error("获取数据失败:", error);
    }
  }
  
  // 每 4 秒更新一次
  fetchPopupContent();
  setInterval(fetchPopupContent, 4000);
  
  function getRandomComment(comments) {
    return comments[Math.floor(Math.random() * comments.length)];
  }
  
  </script>

效果三

<div id="wniui-popup-window" class="wniui-show-popup-window">
  <div class="wniui-popup-header">
      <div style="display: flex; justify-content: space-between; width: 100%; align-items: center;">
          <div id="wniui-user-info" style="display: flex; align-items: center; gap: 8px;"><img
                  class="no-imgbox wniui-popup-image" id="wniui-popup-avatar"
                  src="https://www.wniui.com/wp-content/themes/zibll/img/thumbnail.svg" alt="头像">
              <span id="wniui-popup-username"></span>
          </div>
          <a id="wniui-popup-link" href="#" target="_blank" class="wniui-popup-window-title">网易云热评</a>
      </div>
  </div>
  <div class="wniui-popup-window-divider"></div>
  <div class="wniui-popup-window-content">
      <div class="wniui-popup-tip">加载中...</div>
  </div>
</div>

<style>
#wniui-popup-window {
      min-width: 300px;
      max-width: 500px;
      bottom: 20px;
      right: 20px;
      position: fixed;
      z-index: 1002;
      color: #363636;
      padding: 8px 16px;
      border-radius: 12px;
      transition: opacity 0.3s ease, transform 0.3s ease;
      background-color: rgba(255, 255, 255, 0.85);
      border: 1px solid #e3e8f7;
      max-height: 300px;
      opacity: 0;
      transform: translateY(20px);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
  }

  #wniui-popup-window.wniui-show {
      opacity: 1;
      transform: translateY(0);
  }

  #wniui-popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  .wniui-popup-window-title {
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      line-height: 1;
      background: #363636;
      padding: 4px;
      border-radius: 4px;
      display: inline-block;
      transition: .3s;
  }
.wniui-popup-window-title:hover{
  background-color: #425AEF;
  transition: .3s;
}
  #wniui-user-info {
      background-color: rgba(255, 255, 255, 0.5);
      padding: 4px 8px;
      border-radius: 8px;
      font-size: 12px;
      display: flex;
      align-items: center;
  }

  #wniui-popup-avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      object-fit: cover;
  }

  #wniui-popup-username {
      color: #666;
      font-weight: 500;
  }

  #wniui-popup-window .wniui-popup-window-divider {
      width: 100%;
      margin-top: 6px;
      border: 1px solid #e3e8f7;
  }

  #wniui-popup-window .wniui-popup-window-content {
      font-size: 15px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      word-wrap: break-word;
      max-width: 450px;
      margin-top: 5px;
      overflow: auto;
  }

  #wniui-popup-window:hover {
      border: 1px solid #425AEF;
      transition: 0.4s;
  }

  .wniui-popup-window-content p {
      margin: 0;
  }
</style>

<script>
  let popupTimer;

  function checkWindowWidth() {
      const popup = document.getElementById("wniui-popup-window");
      if (window.innerWidth < 768) {
          popup.classList.remove("wniui-show");
          clearTimeout(popupTimer);
      } else {
          fetchPopupContent();
      }
  }

  function fetchPopupContent() {
      fetch("https://www.wniui.com/api/music/index.php")
          .then(response => response.json())
          .then(data => {
              // 随机选择一个评论
              const randomIndex = Math.floor(Math.random() * data.comments.length);
              const userData = data.comments[randomIndex];
              const content = userData.content || "没有更多的内容";

              const avatarElement = document.getElementById("wniui-popup-avatar");
              avatarElement.src = userData.avatarUrl;

              const usernameElement = document.getElementById("wniui-popup-username");
              usernameElement.textContent = `${userData.nickname}`;

              const musicLink = data.musicLink;

              const titleLinkElement = document.getElementById("wniui-popup-link");
              titleLinkElement.href = musicLink;

              const message = `
                  <div>
                      <p>${content}</p>
                  </div>
              `;
              const popup = document.getElementById("wniui-popup-window");

              popup.classList.remove("wniui-show");
              clearTimeout(popupTimer);

              setTimeout(() => {
                  document.querySelector(".wniui-popup-window-content").innerHTML = message;
                  popup.classList.add("wniui-show");

                  popupTimer = setTimeout(() => {
                      popup.classList.remove("wniui-show");
                      fetchPopupContent();
                  }, 5000);
              }, 300);
          })
          .catch(() => {
              fetchPopupContent();
          });
  }

  checkWindowWidth();
  window.addEventListener("resize", checkWindowWidth);
</script>

文章版权声明 1 本网站名称：极客源码
2 本站永久网址：https://www.jkym.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长邮箱34994@163.com进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END