.jpg)
1 显示效果
2 解决方法
因为没找到这种台词的接口，于是就去网上搜罗了一堆放在csv里面，然后页面刷新的时候自动从csv中抽取一行台词进行展示。分为html代码和js代码，其中progress.js代码如下：
1document.addEventListener('DOMContentLoaded', function() {
2 fetch('/data/douban/quote.csv')
3 .then(response => response.text())
4 .then(data => {
5 const lines = data.split('\n');
6 const quotes = lines.slice(1).map(line => line.split(','));
7 const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
8 document.getElementById('quote').textContent = randomQuote[0];
9 document.getElementById('source').textContent = randomQuote[1] ? '——' + randomQuote[1] : '';
10
11
12 console.log(randomQuote[0],randomQuote[1]);
13
14 });
15 });
在html中添加：
1<style>
2.quote-container {
3 color: #fdfdfd7d;
4 position: relative;
5 width: 100%;
6 height: 100px;
7 border: 0px solid #ccc;
8 padding: 0px;
9 box-sizing: border-box;
10}
11.quote {
12 position: absolute;
13 top: 0;
14 left: 0;
15}
16.source {
17 position: absolute;
18 bottom: 0;
19 right: 0;
20 text-align: right;
21}
22</style>
23<div class="quote-container">
24<span class="quote" id="quote"></span>
25<span class="source" id="source"></span>
26</div>
27<script src="/js/progress.js"></script>
这样就可以了，然后当页面刷新的时候，就会随机展示一句电影台词了~
3 接口更新
找到了一个接口 一言 ，使用接口进行台词的随机展示，这个接口就不仅仅是电影台词了，还有很多类型比如：动画、漫画、游戏、原创文学、影视、诗词、网易云、哲学、抖机灵等等。
然后可以把js代码改为：
1document.addEventListener('DOMContentLoaded', function() {
2 fetch('https://v1.hitokoto.cn')
3 .then(response => response.json())
4 .then(data => {
5 document.getElementById('quote').textContent = data.hitokoto;
6 document.getElementById('source').textContent = '—— ' + data.from;
7 })
8 .catch(error => console.error('Error:', error));
9 });
这样就可以用这个接口的内容来随机展示了。
