申请一个免费的毒鸡汤api，并且用原生JS实现竖行文本的打字机效果

这是我参与更文挑战的第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实现炫酷的视频文本蒙版效果》