Typed.js 实现打字机特效,加入今日诗词~

in Default with 0 comment

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>
Responses