今日诗词 API 是一个可以返回一句古诗词名句的接口。它可以通过图片和 JSON 格式调用。今日诗词 API 根据不同地点、时间、节日、季节、天气、景观、城市进行智能推荐。
Typed.js is a JavaScript library. 它帮助我们实现打字效果
Typed.js的简单使用
1
2
3
4
5
6
7
8
9
10
11
| <script src="https://cdn.staticfile.org/typed.js/2.0.12/typed.min.js"></script>
//引入JS文件
<span class="test"></span>
<script>
var typed = new Typed('.test', {
strings: ["打字的内容","回退的内容"],
typeSpeed: 100 ,
backSpeed:50 ,
loop:true
});
</script>
|
效果就像Banner那样
与今日诗词的合并使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <script src="https://cdn.staticfile.org/typed.js/2.0.12/typed.min.js"></script>
//先引入Typed.js的JS文件
<span id="shici"></span> //需要被改变的元素 可以随便更改成自己的 保持ID为"shici"即可
<script>
var xhr = new XMLHttpRequest();
xhr.open('get', 'https://v2.jinrishici.com/one.json');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
var data = JSON.parse(xhr.responseText);
var says= data.data.content;
}
var typed = new Typed('#shici', {
strings: [says],
typeSpeed: 100 ,
backSpeed:50 ,
loop:true
});
};
xhr.send();
</script>
|
优化方法
以上使用不带参数原生调用，频繁调用会使接口限制，下方使用官方接口
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <script src="https://cdn.staticfile.org/typed.js/2.0.12/typed.min.js"></script>
//同样先引入Typed.js的JS文件
<span class="html-tag"><script <span class="html-attribute-name">src</span>="<a class="html-attribute-value html-resource-link" href="https://sdk.jinrishici.com/v2/browser/jinrishici.js" target="_blank" rel="noreferrer noopener">https://sdk.jinrishici.com/v2/browser/jinrishici.js</a>" <span class="html-attribute-name">charset</span>="<span class="html-attribute-value">utf-8</span>"></span><span class="html-tag"></script></span>
//引入今日诗词官方接口
<span id="shici"></span> //需要被改变的元素 可以随便更改成自己的 保持ID为"shici"即可
<script>
jinrishici.load(function(result) {
var says = innerText = result.data.content;
var title = result.data.origin.title;
var typed = new Typed('#shici', {
strings: [says],
typeSpeed: 100 ,
backSpeed:50 ,
loop:true
});
</script>
|
