打字机特效

官网: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 创作,转载自腾讯云社区。

最后修改:2022 年 05 月 10 日
如果觉得我的文章对你有用,请随意赞赏..