打字机特效
官网:https://mattboldt.com/demos/typed-js/
今日诗词
每次可以返回一个随机的古诗词
官网:https://www.jinrishici.com/
合并使用方法:
1、导入Typed.js
<script src="typed.js"></script> //常规本地导入
<script src="https://cdn.bootcss.com/typed.js/2.0.9/typed.js"></script> //cdn导入需要放在网页的head里面
2、主体使用
<span id="lld110"></span>
<script>
var gsc = new XMLHttpRequest();
gsc.open('get', 'https://v2.jinrishici.com/one.json');
gsc.withCredentials = true;
gsc.onreadystatechange = function () {
if (gsc.readyState === 4) {
var data = JSON.parse(gsc.responseText);
var gushici = document.getElementById('lld110');
var lld110 = data.data.content;
}
var typed = new Typed('#lld110', {
strings: [lld110],
typeSpeed: 100
});
};
gsc.send();
</script>
单独使用打字机特效
1、导入Typed.js
2、主体使用
<span class="element"></span>//html
<script>
var typed = new Typed('.element', {
strings: ["这里是要打的字","回退的字"],
typeSpeed: 100 //打字速度
backSpeed:50 // 回退速度
});
<script>
单独使用随机古诗词
直接主体使用,官网有详细文档说明,链接:今日诗词开放接口
本文由 Alone88 创作,转载自腾讯云社区。