功能:访客每次进入网站时,通过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选择器获取
需要填充每日一言的标签,把内容填充进去。
评论