html调用一言api,纯 JavaScript 实现网站一言功能

之前网站分享过一个一言功能 >>> 网站新增一言功能——微语录就是这么简单 。主要是用来在网站指定位置显示一句语录用的，之前的方式是通过后台 PHP 获取输出到网站前端的，最近闲来无事考虑了下 JavaScript 的实现方式竟然成功了。下面简单说下实现过程。

前端显示代码

注意下 ID 值可以任意设置，调用的时候改下就行：

JS 获取一言函数

函数很简单，值得注意的是 TXT 文本文件的位置。

var txtUrl = "./js/quotes.txt"; // 一言文本本件(TXT)位置

window.onload = function(){

getQuotesTxt( 'quotes', txtUrl); // 获取一言

window.setInterval( "getQuotesTxt( 'quotes', txtUrl)", 5000); // 加个定时器自动刷新

}

// Text 文本文件中随机获取一行

function getQuotesTxt( id, url) {

var i = 0,

resultTxt = "",

resultArr = [];

if( !url ) { return "TXT 文件路径未设置！"}

x = fetch(url)

.then(function(response) {

return response.text();

})

.then(function(text) {

resultArr = text.toString().split(/[\n]/);

i = Math.floor( Math.random()*resultArr.length );

resultTxt = resultArr[i];

document.getElementById( id ).innerHTML = resultTxt;

});

}

只需要向函数传递 DOM 元素的 id 属性值及文本文件的 url 地址即可。地址建议改成绝对路径，因为 js 是以调用位置做相对定位的，有点麻烦。

就这，没了。其实主要还是学习下 JavaScript 读取文档。