标签搜索

为网站增加每日一言功能(附代码)

微芒网
2022-01-08 / 1037 - 阅读

1741496-20190716122132145-1082875484.png

功能:访客每次进入网站时,通过js自行访问api接口获得一言的json字符串通过脚本解析json数据以达到更新每日一言的目的。

代码:

<!--实现每日一言-->
<div id="hitokoto"style="font-size:16px;color:red;">:D 获取中...</div>
<script src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"></script>
<!--End-->
<script>
  fetch('https://v1.hitokoto.cn')
    .then(function (res){
      return res.json();
    })
    .then(function (data) {
      var hitokoto = document.getElementById('hitokoto');
      hitokoto.innerText = "每日一言:"+data.hitokoto; 
    })
    .catch(function (err) {
      console.error(err);
    })
</script>

一言参数设置:

可以通过所访问的API接口的参数来进行每日一言的类型设置,共有七种类型可供选择,

七种类型及其对应参数分别为:

动画(a)、漫画(b)、游戏(c)、小说(d)、原创(e)、网络(f)、其他(g)。

请求方式如下:

https://v1.hitokoto.cn/(从7种分类中随机抽取)

https://v1.hitokoto.cn/?c=b (请求获得一个分类是漫画的句子,c代表category,即类型)

https://v1.hitokoto.cn/?c=f&encode=text (请求获得一个来自网络的句子,并以纯文本格式输出)

具体的一些细节和设置请点击传送门:https://hitokoto.cn/api

JS代码剖析:

先通过调用API接口,获得响应后取得json数据,之后解析取得每日一言的内容,通过dom选择器获取

需要填充每日一言的标签,把内容填充进去。

190

评论

博主关闭了本网站的评论