Typed.js
Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.
简单的就是打字机特效
官网地址:https://mattboldt.com/demos/typed-js/
使用
1.导入Typed.js
<script src="typed.js"></script> //常规本地导入
<script src="https://cdn.bootcss.com/typed.js/2.0.9/typed.js"></script> //cdn导入
导入需要放在网页的head里面
使用
<span class="element"></span>//html
<script>
var typed = new Typed('.element', {
strings: ["这里是要打的字","回退的字"],
typeSpeed: 100 //打字速度
backSpeed:50 // 回退速度
});
<script>
今日诗词
每次可以返回一个随机的古诗词
官网:https://www.jinrishici.com/
使用
简单版
<span id="jinrishici-sentence">正在加载今日诗词....</span>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
原生Javascript调用
<script>
var xhr = new XMLHttpRequest();
xhr.open('get', 'https://v2.jinrishici.com/one.json');
xhr.withCredentials = true;
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
var data = JSON.parse(xhr.responseText);
// 处理示例
var gushici = document.getElementById('gushici');
gushici.innerText = data.data.content;
}
};
xhr.send();
</script>
Jquery调用
$.ajax({
url: 'https://v2.jinrishici.com/one.json',
xhrFields: {
withCredentials: true
},
success: function (result, status) {
console.log(result)
}
});
合并使用
head需要先导入Typed.js
<span id="alone88"></span>
<script>
var xhr = new XMLHttpRequest();
xhr.open('get', 'https://v2.jinrishici.com/one.json');
xhr.withCredentials = true;
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
var data = JSON.parse(xhr.responseText);
// 处理示例
var gushici = document.getElementById('alone88');
var alone88 = data.data.content;
}
var typed = new Typed('#alone88', {
strings: [alone88],
typeSpeed: 100
});
};
xhr.send();
</script>
也可以直接调用我的
<span id="alone88"></span>
<script src="https://i.alone88.cn/alone88.js"></script>