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

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