html5文字打印机效果

body：

<div id="text" style="color: white;margin-left:10%;font-size: 17px;font-weight: bold;background-color: rgba(0,0,0,0.71);margin-top: 20px;line-height: 30px;"></div>

js：

var divTyping = document.getElementById('text')
    var i = 0,
        timer = 0,
        str = '关于如何创建新密码本：<br/>有两种方式：<br/>1：点击上方创建新密码本。  <br/>2：点击文字跑马灯（就一直在往左边移动的文字）。<br/>按要求输入需要填写的信息提交后密码本创建成功。<br>' +
            '关于密码本安全性问题：<br>1：关于密码：<br>密码使用的是MD5双重加密（已加盐）也就是说除了你知道密码以外没人知道，包括作为开发者的我也不知道，即使他人拿到了数据库文件也不存在知道你密码的情况（请保管好自己的密码）。' +
            '<br>2：关于内容：<br>在该目录下发布的所有内容除标题外已全部进行加密处理，内容已进行三次加密没有固定的秘钥格式几乎无法破解你发布的任何加密内容，同上即使拿到数据库文件也看不到你加密内容的任何信息。' +
            '<br/>关于密码本：<br/>1：密码本可多次创建，每个密码本根据你创建的内容都将会有所不同这里大家可以自行摸索。' +
            '<br/>2：新建加密内容时请注意右上角的位置有一个开关默认是加密状态，如果你想将你的内容公开可点击开关并提交新建的内容即可，也可通过修改更换显示状态。<br>' +
            '3：删除密码本时请注意，如果你将密码本删除那么密码本里面的内容也将全部消失，删除后内容将不可恢复，请谨慎处理！<br/>' +
            '4：每个密码本都将有自己的时间线，点击时间即可查看对应时间线内的所有加密内容，点击标题即可查看内容详情<br/>' +
            '5：时间线陈述是时间段之间的空格处可以由用户自主填写的信息如2021-01至2021-02时间段可陈述自己的心情或者文案，具体操作可自行摸索。<br>' +
            '6：待完善。。。（如果您有更好的意见或建议欢迎点击问题反馈发邮箱给我）<br/>' +
            '注意事项：<br/>请勿公开黄、赌、毒等不利于他人身心健康的内容（包括广告！！！只要你发广告你就真的完蛋了~），如发现恶意公开者将永久封停账户！网站是我自己一个人纯手打的代码不容易，大家手下留情。<br/>' +
            '结语：<br/>帽子先生麻烦高抬贵手<br/>技术交流可点击底部版权信息或点击（联系方式加载可能有点慢，其实不是很重要）&nbsp;&nbsp;>><a href="tencent://message/?uin=1309832337&Site=Sambow&Menu=yes" style="color: #01AAED;" title="启用QQ联系作者">YuShun</a><<<br>';

    function typing () {
        if (i <= str.length) {
            divTyping.innerHTML = str.slice(0, i++) + '_'
            timer = setTimeout(typing, 100)
        }
        else {
            divTyping.innerHTML = str//结束打字,移除 _ 光标
            clearTimeout(timer)
        }
    }
    typing();