纯 JavaScript 实现网站一言功能

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

前端显示代码

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

<div id="quotes" class="quotes"></div>

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 是以调用位置做相对定位的，有点麻烦。

以上。