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 读取文档。

html调用一言api,纯 JavaScript 实现网站一言功能相关推荐

html调用一言api,博客集成Hitokoto·一言经典语句功能
Hitokoto·一言是一个挺有意思的项目,官方的自我介绍如下: 一言网(Hitokoto.cn)创立于2016年,隶属于萌创Team,目前网站主要提供一句话服务. 动漫也好.小说也好.网络也好,不论 ...
javascript 实现网站浏览统计功能
1.从客户端获取piwik信息,后台接口接收传入的值再存入数据库 js代码如下 var npCore = {cookie: {set: function(key, val, time) { //设置c ...
纯JavaScript实现的调用设备摄像头并拍照的功能
这篇文章本来不在Jerry计划内的,咱们SAP中国研究院今天已经正式上班了,Jerry也回到工作岗位开始搬砖了. 今天一位同事问我关于本文标题描述的功能如何实现,Jerry在网上随便搜了一下,类似的例 ...
html调用一言api,「许巍定制」自建 Typecho/WordPress 一言API本地服务并调用
Hitokoto·一言是一个挺有意思的项目,一言网(Hitokoto.cn)创立于2016年,隶属于萌创Team,目前网站主要提供一句话服务. 动漫也好.小说也好.网络也好,不论在哪里,我们总会看到有 ...
ArcGIS API for javascript开发笔记（五）——GP服务调用之GP模型的发布及使用详解...
感谢一路走来默默陪伴和支持的你~~~ ----------------欢迎来访,拒绝转载---------------- 关于GP模型的制作请点我! 一.GP发布 ArcGIS Desktop可以作为 ...
安卓实现每日一句功能-一言API调用
当点击按钮时会随机返回一句名言,使用一言API是一个不错的选择,一言API是免费提供的. 相关网址一言API官网地址:https://hitokoto.cn/ 一言API的开发者文档地址:https ...
javascript调用百度地图api
百度地图提供sdk,javascript api等多种客户端调用方式,通常在网页上用的比较多,也就是javascript api,这里根据自己的使用,简单介绍一下如何快速使用javascript调用百 ...
（一）C#调用一言API并提取关键字
前言由于最近在做一个项目需要上位机,因此就去学了下用C#编写上位机程序.一言网站提供了免费的一句话api,调用起来很方便.但由于本人没有系统的学习C#与网络知识,因此本文之讲述我所理解的部分,涉及到 ...
百度短语音识别api（JavaScript调用）
百度短语音识别api(JavaScript调用) 前言页面效果预览配置代理获取百度鉴权机制token请求百度短语音识别请求获取百度Access Token 调用短语音识别接口使用本地文件测 ...

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

html调用一言api,纯 JavaScript 实现网站一言功能相关推荐

最新文章

热门文章