吐槽大王部落格

看到很多 ACG 博客都用上了一言，但我觉得在同一个页面只显示一条内容未免有些单调，所以想让它定时轮播，而且采用较好的切换效果。

我后来在 WNJXYK 上看到了我想要的轮播效果，但那是基于 jQuery 制作的。

因为对于我这种讨厌为一个小功能放上大型前端库的人来说不能忍，所以我用原生 JS 写了一个。

2018 年，为了获得更佳的性能和稳定性，我把这个脚本进行了重写，从 JavaScript 动画更改为 CSS 渐变，并改掉了一些不科学的地方。

下面是实际效果：

如果你在使用 RSS 阅读器，请访问原文查看效果。

HTML 部分

<span id="hitokoto"></span>

JavaScript 部分

(function () {
  var server = "https://api.lwl12.com/hitokoto/v1";
  var target = document.getElementById("hitokoto");
  var fadeDur = 1;
  var waitDur = 10;
  var errorMsg = "加载出现了问题！";
  /* -=-=-=-=-=-=-=-=-=-=-=- 你的配置部分结束 -=-=-=-=-=-=-=-=-=-=-=- */
  var first = true;
  var present = "";
  target.style.opacity = 0;
  target.style.transition = "opacity " + fadeDur + "s";
  function loadData() {
    var connect = new XMLHttpRequest();
    connect.open("GET", server, true);
    connect.onload = function () {
      if (connect.status >= 200 && connect.status < 400) {
        present = connect.responseText;
        if (first) {
          first = false;
          target.textContent = present;
          fadeIn();
        } else {
          fadeOut();
        }
      } else {
        target.style.opacity = 1;
        target.textContent = errorMsg;
        setTimeout(loadData, (fadeDur + waitDur) * 1000);
      }
    };
    connect.onerror = function () {
      target.textContent = errorMsg;
      setTimeout(loadData, (fadeDur + waitDur) * 1000);
    };
    connect.send();
  }
  function fadeOut() {
    target.style.opacity = 0;
    setTimeout(function () {
      target.textContent = present;
      fadeIn();
    }, fadeDur * 1000);
  }
  function fadeIn() {
    target.style.opacity = 1;
    setTimeout(loadData, (fadeDur + waitDur) * 1000);
  }
  loadData();
})();