一言,局部刷新句子

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

今天的教程可以理解为,使用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>

效果图如下(无视那个小人,与本文无关):

图片[1]-一言,局部刷新句子-墨吻博客

当然,单调的显示还是缺乏灵动,所以我们还可以还要添加一个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

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 共4条

请登录后发表评论