飞羽映月

看着某位大佬这个打字挺牛逼的，就爬过来了，嘿嘿，保存一下，下次自己可以使用

需要引入jquery

引入参考

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

一、直接使用代码

<script>
      var xhr = new XMLHttpRequest();
  xhr.open('get', 'https://v1.hitokoto.cn/');
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      var data = JSON.parse(xhr.responseText);//获得字符串形式的响应数据。
      var hitokoto = document.getElementById('hitokoto');
	  var fromm=document.getElementById("from")
	  fromm.innerText=data.from;
      hitokoto.innerText = data.hitokoto;
    }
  }
  xhr.send();
</script>
     <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>

<div class="wrap" id="chakhsu" style="font-size:14px; font-weight:normal" align=center ></div>

二、CDN引入，使用js

两种方法，推荐保存一下，不然链接挂了不就用不了了

  <script src="https://blog-static.cnblogs.com/files/bin007/dazi1.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/bin007/dazi2.js"></script>
<div class="wrap" id="chakhsu" style="font-size:14px; font-weight:normal" align=center ></div>

效果