一言，局部刷新句子

也是见很多博客部署了一言，但终归还是要刷新整个网页才能更换下一条句子，不够灵动。

今天的教程可以理解为，使用ajax局部刷新指定div，达到定时读取一言显示到页面。通俗来讲就是定时刷新div。

教程如下：

将下面所述代码找个合理的地方放上，这就不用我多说了吧。

<script>
function ajax(url)
{
    if(window.XMLHttpRequest)
        {
            var oAjax = new XMLHttpRequest();
        }
        else
        {
            var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象
        }
        oAjax.open("GET",url,true);//把要读取的参数的传过来。
        oAjax.send();
        oAjax.onreadystatechange=function()
        {
            if(oAjax.readyState==4)
            {
                if(oAjax.status==200)
                {
                    xianshi(oAjax.responseText);//成功的时候调用这个方法
                }
                else
                {
                    
                }
            }
        };
}
  function xianshi(str)
  {
    $("div#1078").html(str);//将读取的内容输出到指定id
  }
setInterval("ajax('https://v1.hitokoto.cn/?d=f&encode=text')",5000);//以毫秒计算，5000=5秒，自行修改。
</script>
<script>
 ajax('https://v1.hitokoto.cn/?d=f&encode=text');
</script>

接口啥的随意了，自带接口要实现跨域访问。这里使用的一言官方接口。

光有脚本还不行。所以还要继续看第二步，我们需要一个hook（钩子）

第二步、添加以下代码到你想显示的地方。

<b><div class="hitokoto"><div id ="1078"></div></div></b>

效果图如下（无视那个小人，与本文无关）：

当然，单调的显示还是缺乏灵动，所以我们还可以还要添加一个css，让它更加灵动。（这地方加不加无所谓，加不加下面的也无所谓，想要有特色的还是自己写个最好。）具体效果自己添加看看吧。

<style>
.hitokoto{
    border-left: 5px solid #0073d8;
    border-right: 5px solid #0073d8;
    background-color: #3288d31a;
    padding: 10px;text-align: center;
    color: #0073d8;
    margin: 5px 0 5px 0;
}
  </style>

但我觉得还是不够灵动怎么办呢？添加wow特效，我的博客主题自带wow特效，所以就随手取来用了，具体代码请自行查找。（Q：你就是懒。A：咋了不行啊？有现成的为啥不用。）

我这边直接为hook添加了wow。代码如下，这段根据实际情况来添加修改。

<div class="hitokoto wow flipInY animated" style="visibility: visible; animation-name: flipInY;"><div id="1078"></div></div>

查看演示：https://www.coets.cn/#1078