一言+逐字出现特效
程序员文章站
2022-06-04 17:06:49
...
1.逐字显示文字
- 步骤
- 准备一段文字放在string容器中,并隐藏string容器
- 一个一个读取string容器中的内容,显示到showStr1容器中
- 用定时器逐字显示
- 效果
- 源码:
<h>用来显示逐渐出现的文字</h> <p id="showStr1"></p> <div style="display:none" id="string">helloworld </div> <script> var index = 0; var str = document.getElementById("string").innerHTML; function type() { if(index == str.length) { index = 0; } document.getElementById("showStr1").innerText = str.substring(0, index++); } setInterval(type, 200); //通过定时器来让文字逐步显示 </script>
2.一言推送
结合一言api接口,推送文字到string容器
- 效果:
- 源码:
<!-- 一言 --> <script type="text/javascript" src="https://api.imjad.cn/hitokoto/?cat=&charset=utf-8&length=&encode=js&fun=sync&source="></script> <div style="display:none" id="hitokoto"><script>hitokoto()</script> </div> <script> var index = 0; var str = document.getElementById("hitokoto").innerText; str = str.substring(10, str.length)//裁剪hitokoto()字样 function type() { if(index == str.length) { index = 0; } document.getElementById("showStr").innerText = str.substring(0, index++); } setInterval(type, 200); //通过定时器来让文字逐步显示 </script>
- 将showStr放在你想展示的位置即可;
如果要改变样式,修改showStr容器style。
上一篇: 关于JSON和一言API
下一篇: 一言难尽