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

Alone88

发布于 2019-10-22 17:30:44

1.9K0

发布于 2019-10-22 17:30:44

文章被收录于专栏：Alone88

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>

本文由 Alone88 创作，采用知识共享署名4.0 国际许可协议进行许可本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名最后编辑时间为: Dec 18, 2018 at 10:16 am

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

https