當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/8 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了青柠起始页——一言接口调用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

青檸起始頁——一言接口調用

由于之前寫過青檸起始頁的樣式，當時在訪問青檸起始頁時，看到了頁面推送的“一言”，本人表示非常喜歡這個功能，最近剛剛學習了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