之前网站分享过一个一言功能 >>> 网站新增一言功能——微语录就是这么简单 。主要是用来在网站指定位置显示一句语录用的,之前的方式是通过后台 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 是以调用位置做相对定位的,有点麻烦。
以上。