2019-08-14网页制作5 分钟读完 (大约 696 个字) 0次访问

为网页添加一个一言插件

分站内容可能或出现渲染错误或内容过时等问题，请以主站为准！
分站禁止评论，评论请前往主站！

本篇文章教大家如何给自己的网页添加一个一言插件。

什么是一言？

简单来说，一言指的就是一句话，可以是动漫中的台词，也可以是网络上的各种小段子。

使用方法

将下方代码插入到你想让一言显示的位置即可

<p id="hitokoto">:D 获取中...</p>
<!-- 以下写法，选取一种即可 -->
<!-- 现代写法，推荐 -->
<!-- 兼容低版本浏览器 (包括 IE)，可移除 -->
<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>
<!-- 老式写法，兼容性最忧 -->
<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');
      hitokoto.innerText = data.hitokoto;
    }
  }
  xhr.send();
</script>
<!-- 新 API 方法， 十分简洁 -->
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer=""></script>

其他参数设置

请求地址

请求地址	请求方式	说明
https://v1.hitokoto.cn/	GET/POST	1、已启用 HSTS，并已加入 HSTS Preload List 计划 2、站点QPS限制：10，超过有可能会被屏蔽 3、线路：大陆+海外
https://international.v1.hitokoto.cn/	GET/POST	1、已启用 HSTS，并已加入 HSTS Preload List 计划 2、站点QPS限制：25，超过有可能会被屏蔽 3、线路：海外

请求方式

参数名称	类型	描述
c	可选	Cat，即类型。提交不同的参数代表不同的类别，具体：
		a	Anime - 动画
		b	Comic – 漫画
		c	Game – 游戏
		d	Novel – 小说
		e	Myself – 原创
		f	Internet – 来自网络
		g	Other – 其他
		其他不存在参数	任意类型随机取得
encode	可选
		text	返回纯净文本
		json	返回不进行unicode转码的json文本
		js	返回指定选择器(默认.hitokoto)的同步执行函数。
		其他不存在参数	返回unicode转码的json文本
charset	可选
		utf-8	返回 UTF-8 编码的内容，支持与异步函数同用。
		gbk	返回 GBK 编码的内容，不支持与异步函数同用。
callback	可选
		回调函数	将返回的内容传参给指定的异步函数。

返回数据（默认json格式）

返回参数名称	描述
id	本条一言的id。可以链接到https://hitokoto.cn?id=[id]查看这个一言的完整信息。
hitokoto	一言正文。编码方式unicode。使用utf-8。
type	类型。请参考第三节参数的表格。
from	一言的出处。
creator	添加者。
created_at	添加时间。
注意：如果encode参数为text，那么输出的只有一言正文。