这是我参与更文挑战的第12天，活动详情查看： 更文挑战
前言
今天是端午节放假的第一天，想着给我的博客首页添加一些有意思的东西，思来想去，准备在首页添加一句毒鸡汤，毒鸡汤一定要是随机的，每次刷新都会有不同的句子，然后通过打字机的效果表现出来。为了巩固JS基础，我决定先用原生JS做个Demo出来，撸起袖子说做就做，效果如下图。
毒鸡汤的接口
毒鸡汤的句子千千万万，我没有条件自己搞个数据库和接口出来，所以当然最好是有免费现成的最香啦！我找了好久，最后用的是天行数据API接口，不是打广告哈，毕竟我这小小的阅读量也没人找我打广告~
先简单整理一下天行数据部分开放API接口：
功能还是很多很好玩的，可以做出很多有意思的东西。不过我们要用到的接口并不在上面的开放接口里面，而是注册了免费会员之后，申请的免费接口。
在注册了免费会员之后，我们直接来到接口大全的页面，可以看到，有很多有意思的接口提供：
我们可以在这里搜索我们想要的接口，搜索“毒鸡汤”，结果如下：
点进去之后，有调用示例，返回参数等一应俱全，直接申请即可：
申请完毕之后，可以在数据管理》我申请的接口中查到该接口：
可以看到毒鸡汤的接口免费次数是100次，反正对我来说是足够用啦~如果实在不够还可以用天豆抵扣，具体天豆怎么获得之类的，我也不太清楚，这里不做讨论。
好了，既然我们已经成功得到了毒鸡汤的接口，下面就可以来实现一个竖版的打字机效果啦！
竖版打字机效果
竖版的打字机，必须要先把文字竖起来（好像是句废话），这里我采用了简单粗暴的方法，在这个打字机效果的盒子内，每一列字是一个p标签，p标签包含span标签，span标签里面是文字，给p标签一个字的宽度，宽度不够，文字会自动换行。基本布局代码如下所示：
<style>
p {
float: left;
width: 1em;
height: 100%;
font-size: 14px;
margin: 5px;
text-align: left;
}
</style>
<div class="signature">
<p>
<span>努力把日子填满</span>
</p>
<p>
<span>别来提醒我有多孤单</span>
</p>
</div>
效果如图：
css效果完成之后，我们来看打字机的效果如何实现：
想要实现打字机的效果，我们要考虑以下几个方面：
- 文本要根据标点符号进行切割，转为数组，可以该采用正则表达式。
- 文字逐个展示出来，所以使用字符串的substring方法最合适不过了。
- 光标的闪烁效果直接用jq的fadeOut和fadeIn淡入淡出来实现即可。 于是我立马写了如下代码：
let text // 打印的文本
let arr // 文本根据标点符号切割后的数组
let i = 0 // 初始数组循环下标从0开始
function daziji(i) {
let ps = $(".signature").children("p") // 获取盒子内共有几行文本
if (i == ps.length) return false // 如果0行文本，直接结束函数
let index = 0 // 当前行文字字数
let dazi = setInterval(function() {
ps[i].childNodes[1].innerText = "I"
$(ps[i].childNodes[1]).fadeOut(300).fadeIn(300)
ps[i].childNodes[0].innerText = arr[i].substring(0, index++)
if (index > arr[i].length) {
$(ps[i].childNodes[1]).remove()
clearInterval(dazi)
daziji(++i)
}
}, 400)
}
调用毒鸡汤接口来获取句子，然后在页面展示出来，代码如下：
// 通过天行接口调用毒鸡汤
function getSoup() {
$.ajax({
type: "get",
url:
// 毒鸡汤
"https://api.tianapi.com/txapi/dujitang/index?key=你的key值",
success: function(success) {
if (success.code == 200) {
text = success.newslist[0].content
var reg = /[,；|，；|;;|；;|:；|：；|。；|.；|？；|?；| ；]/g // 正则部分只判断了这些标点符号的情况
arr = text.split(reg)
for (var j = 0; j < arr.length; j++) {
let pp = "<p><span></span><span></span></p>"
$(".signature").append(pp)
}
daziji(i)
}
},
error: function(error) {
console.error("获取数据错误" + error)
text = `黑夜给了我黑色的眼睛 ,我却用它寻找光明`
var reg = /[,；|，；|;;|；;|:；|：；|。；|.；|？；|?；| ；]/g
arr = text.split(reg)
for (var j = 0; j < arr.length; j++) {
let pp = "<p><span></span><span></span></p>"
$(".signature").append(pp)
}
daziji(i)
}
})
}
看一下效果吧：
完美运行！毕竟是自己亲手写的代码，尤其是端午节的假期，依旧孜孜不倦敲代码，所以看起来特别有成就感！
后记
毕竟是假期的第一天，玩了一天，晚上回来实现了这个效果立马整理了文章发出来，多多少少会考虑不周，代码有些粗糙和可优化的地方，当然啦，最重要的还是好玩。如果本文有帮助到你，希望点赞关注大冰块一下，如果有更好的意见也欢迎评论探讨~
PS: 今天是我参加掘金更文挑战的第12天，端午节依旧努力淦文章，已经坚持12天啦！有志者，事竟成。大家一起加油~
更文挑战的文章目录如下：
- 2021.06.01 《多图预警！详细谈谈Flex布局的容器元素和项目元素的属性~》
- 2021.06.02 《如何把css渐变背景玩出花样来》
- 2021.06.03 《如何使用SVG制作沿任意路径排布的文字效果》
- 2021.06.04 《3大类15小类前端代码规范，让团队代码统一规范起来！》
- 2021.06.05 《团队管理之git提交规范：大家竟然都不会写commit记录？｜ 周末学习》
- 2021.06.06 《如何控制css鼠标样式以及扩大鼠标点击区域 ｜ 周末学习》
- 2021.06.07 《纯css实现：仿掘金账户密码登录时，小熊猫捂眼动作切换的小彩蛋》
- 2021.06.08 《从11个方面详细谈谈原型和原型链》
- 2021.06.09 《深入谈谈JavaScript的作用域及作用域链》
- 2021.06.10 《JavaScript中的闭包究竟是什么》
- 2021.06.11 《纯css实现炫酷的视频文本蒙版效果》
