每日一言

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title>Object</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

  </head>

  <script type="text/javascript">
    $(function() {


      $.ajax({
        url: "https://v1.hitokoto.cn/",
        data:'', // 请求的参数
        type: "GET", //提交方式
        dataType: "json",
        success: function(data) {
            // 请求后处理
            // 调用文字处理方法
            chakhsu(document.getElementById("chakhsu"),data.hitokoto);
          console.log(data.hitokoto);
        }
      });



      // 文字循环处理 两个参数,第一个是需要显示在哪个标签内append 以id为选择器,第二个参数是 要处理的文字
      function chakhsu(r,text) {
        function t() {
          return b[Math.floor(Math.random() * b.length)];
        }
        function e() {
          return String.fromCharCode(94 * Math.random() + 33);
        }
        function n(r) {
          for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
            var l = document.createElement("span");
            (l.textContent = e()), (l.style.color = t()), n.appendChild(l);
          }
          return n;
        }
        function i() {
          var t = o[c.skillI];
          c.step
            ? c.step--
            : ((c.step = g),
              c.prefixP < l.length
                ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++)
                : "forward" === c.direction
                ? c.skillP < t.length
                  ? ((c.text += t[c.skillP]), c.skillP++)
                  : c.delay
                  ? c.delay--
                  : ((c.direction = "backward"), (c.delay = a))
                : c.skillP > 0
                ? ((c.text = c.text.slice(0, -1)), c.skillP--)
                : ((c.skillI = (c.skillI + 1) % o.length),
                  (c.direction = "forward"))),
            (r.textContent = c.text),
            r.appendChild(
              n(
                c.prefixP < l.length
                  ? Math.min(s, s + c.prefixP)
                  : Math.min(s, t.length - c.skillP)
              )
            ),
            setTimeout(i, d);
        }
        /*以下内容自定义修改*/
        var l = "每日一言:",
          o = [text].map(function(r) {
            return r + "";
          }),
          a = 3,
          g = 1,
          s = 5,
          d = 75,
          b = [
            "rgb(110,64,170)",
            "rgb(150,61,179)",
            "rgb(191,60,175)",
            "rgb(228,65,157)",
            "rgb(254,75,131)",
            "rgb(255,94,99)",
            "rgb(255,120,71)",
            "rgb(251,150,51)",
            "rgb(226,183,47)",
            "rgb(198,214,60)",
            "rgb(175,240,91)",
            "rgb(127,246,88)",
            "rgb(82,246,103)",
            "rgb(48,239,130)",
            "rgb(29,223,163)",
            "rgb(26,199,194)",
            "rgb(35,171,216)",
            "rgb(54,140,225)",
            "rgb(76,110,219)",
            "rgb(96,84,200)"
          ],
          c = {
            text: "",
            prefixP: -s,
            skillI: 0,
            skillP: 0,
            direction: "forward",
            delay: a,
            step: g
          };
        i();
      }

    
    });
  </script>
  <style></style>

  <body>
    <div class="container">
     <div id="chakhsu">

     </div>
    </div>
  </body>
</html>
Object