当前位置：首页 >

青柠起始页——一言接口调用

发布时间：2023/12/8 46 豆豆

生活随笔收集整理的这篇文章主要介绍了青柠起始页——一言接口调用小编觉得挺不错的,现在分享给大家,帮大家做个参考.

青柠起始页——一言接口调用

由于之前写过青柠起始页的样式，当时在访问青柠起始页时，看到了页面推送的“一言”，本人表示非常喜欢这个功能，最近刚刚学习了dom，了解了一些对文档进行操作的方式，刚刚好就可以实现“一言”模块。

首先，“一言”是什么？

官网简介

动漫也好、小说也好、网络也好，不论在哪里，我们总会看到有那么一两个句子能穿透你的心。我们把这些句子汇聚起来，形成一言网络，以传递更多的感动。如果可以，我们希望我们没有停止服务的那一天。简单来说，一言指的就是一句话，可以是动漫中的台词，也可以是网络上的各种小段子。或是感动，或是开心，有或是单纯的回忆。来到这里，留下你所喜欢的那一句句话，与大家分享，这就是一言存在的目的。

该接口也是萌创团队自 2016 年以来稳定提供的接口。

主要方法

调用接口的地址 fetch('https://v1.hitokoto.cn/?c=i').then(response => response.json()).then(data => {//声明两个名称，用来获取页面中要操作的元素//显示诗句的元素const hitokoto = document.getElementById('hitokoto_text')//显示诗句作者的元素const hitokotoAuthor = document.getElementById('hitokoto_author')//获取到uuid//一言唯一标识；可以链接到 https://hitokoto.cn?uuid=[uuid] (opens new window)查看这个一言的完整信息hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuid//将获取到的内容填充到页面中 data.hitokoto诗句 data.from出处hitokoto.innerText = data.hitokotohitokotoAuthor.innerText = '—— ' + data.from}).catch(console.error)

一些改动

fetch('https://v1.hitokoto.cn/?c=i')

其中地址中c=i
i是诗句类一言

更改**c=**的值可以获取到不同类型的句子

下面是表格

参数说明

a	动画
b	漫画
c	游戏
d	文学
e	原创
f	来自网络
g	其他
h	影视
i	诗词
j	网易云
k	哲学
l	抖机灵
其他	作为动画类型处理

可选择多个分类，例如： ?c=a&c=c

另外这里还有另一个留言板的小作业，也同样使用了一言的接口

附上作业的源码

HTML

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/reset.css"><link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link rel="stylesheet" href="./css/index.css"> </head><body><div id="app"><div class="framework"><header><nav><ul><li>动画</li><li>漫画</li><li>游戏</li><li>文学</li><li>原创</li><li>来自网络</li><li>其他</li><li>影视</li><li>诗词</li><li>网易云</li><li>哲学</li><li>抖机灵</li></ul></nav></header><main><div class="banner"><div class="mohu"></div><div class="p"><p id="hitokoto_text"></p></div><i id="reflashBtn" class="fa fa-repeat"></i></div><div class="main"><div class="container"><input id="msg" class="text" type="text"><input id="btn" class="submit" type="submit"><button>随思妙想</button></div><div class="content"><h3>留言列表</h3><ul></ul></div></div></main><footer></footer></div></div> </body> <script src="./js/index.js"></script></html>

JavaScript

// 获取输入框 var input = document.querySelector('.text') // 获取妙记按钮 var thinkBtn = document.querySelector('button') // 获取刷新按钮 var reflashBtn = document.getElementById('reflashBtn') var str1 = document.querySelector('#hitokoto_text'); var alph = 'i';//默认是古诗词 var alphlist = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l']; var list = document.querySelectorAll('nav ul li');for (let i = 0; i < list.length; i++) {list[i].onclick = function () {alph = alphlist[i]poem(str1, alph)console.log(alph);} }// 句子的接口调用函数 function poem(str, alph) {var link = 'https://v1.hitokoto.cn/?c=' + alph;const hitokoto = str;fetch(link).then(response => response.json()).then(data => {hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuidif (data.from_who == null) {hitokoto.innerText = '「' + data.hitokoto + '」' + '\n' + ' —— ' + data.from //+ `\t· ` + data.from_who} else {hitokoto.innerText = '「' + data.hitokoto + '」' + '\n' + ' —— ' + data.from + `\t· ` + data.from_who}str = hitokoto.innerHTML;}).catch(console.error)return str; } poem(str1, alph);// 按钮单击刷新诗句 reflashBtn.onclick = function () {var k = 0poem(str1, alph)k += 360reflashBtn.style.transform = 'rotate(' + k + 'deg)'; }thinkBtn.onclick = function () {var p = document.getElementById('hitokoto_text');input.value = p.innerText }// 主功能 // 获取元素 var btn = document.getElementById('btn') var ulNode = document.querySelector('h3~ul')// 按钮点击事件 btn.onclick = function () {var msg = document.getElementById('msg')var liNode = document.createElement('li')//建立时间对象var data = new Date();var year = data.getFullYear();var month = data.getMonth() + 1;var day = data.getDate();var hours = data.getHours();var minutes = data.getMinutes();var second = data.getSeconds();if (msg.value == '') {} else {// li的值等于msgliNode.innerHTML = msg.value + '<span>' + year + '-' + month + '-' + day + '-' + hours + ':' + minutes + ':' + second + '</span>' + '<a>删除</a>';ulNode.insertBefore(liNode, ulNode.children[0])// delvar aBtn = document.querySelector('h3~ul a');aBtn.addEventListener('click', function (e) {ulNode.removeChild(e.target.parentNode);});}}

CSS

header {position: fixed;width: 100%;height: 60px;z-index: 1000;background-color: transparent; }nav ul {display: flex;justify-content: right;margin-right: 50px; }nav li {margin: 0 10px;line-height: 60px;color: #fff;cursor: pointer;transition: all .25s; }nav li:hover {color: rgba(0, 0, 0, .2); }main .banner {width: 100%;height: 100vh;background: url(../images/qf3cu.jpg) no-repeat;background-position: 0% 100%;position: fixed;margin-bottom: 10px; }.banner .mohu {position: fixed;width: 100%;height: inherit;background-color: rgba(0, 0, 0, .2); }.banner .p {position: absolute;width: 100%; }.banner p {text-align: center;margin-top: 100px;height: 200px;line-height: 100px;font-size: 50px;color: #fff; } .main{width: 100%;position: absolute;top: 400px; } main .container, main .content {width: 1200px;margin: 0 auto;position: relative; }input.text {width: 1200px;height: 200px;margin: 0px auto;outline: none;color: #fff;font-size: 20px;background-color: rgba(0, 0, 0, .2); }input.submit {margin: 10px 0;position: absolute;top: 82%;right: 0; }button {margin: 10px 0; }span {margin-left: 30px; }i.fa {position: fixed;right: 5px;top: 360px;font-size: 42px;transition: all .25s;transform: rotate(0); }.content ul li {height: 40px;line-height: 40px;background-color: rgba(0, 0, 0, .2); } .content ul a{float: right;margin-right: 10px;color: #fff;transition: all .25s; } .content ul a:hover{color: red; }

总结

以上是生活随笔为你收集整理的青柠起始页——一言接口调用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。

上一篇：产品经理笔试技巧：产品设计题
下一篇： Houdini `@pdg_output