5行代码带你实现一个js的打字效果
有次看电影， 看到屏幕上一个个的文字蹦出来， 感觉像是有人在打字一样， 觉得挺有意思， 于是这里也用js实现了一个。
效果预览
最简单的打字效果
只要五行代码， 这里直接贴出来：
是不是超级简单， 现在只要执行这个函数， 你就能看到这样的效果了：
实现原理：
通过setTimeout设置一个时间的间隔， 每隔一定时间向dom中插入对应的数据， 并将index加1， 然后重新调用这个写函数。
我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
在字的后面加上模拟的闪烁光标
思路：
通过一个伪类after将光标定在dom的最后面， 并给一个显示隐藏的循环动画模拟光标的闪烁
通过css3的animation我们就实现了一个闪烁的光标效果。
实现：
我们可以把上面的代码放在一个class中， 然后我们执行writing时将这个class加到对应的dom中即可。
实现输入汉字加拼音
这里依赖一个插件pinyin， 大家可以通过npm安装
使用也很简单，我们只要把文本传入这个插件的方法中， 返回的就是每个汉字的拼音的数组。
然后我们通过模板字符串注入到对应的文字后面即可：
这样就实现了加拼音的简单效果了。
加动画
加动画的代码也很简单， 关键是思路。
我开始的想法是将每个文字用span标签包裹起来， 给每个span加动画即可。后来发现这样行不通， 因为每次dom中的innerHTML其实是重新渲染的， 那样的话， 之前的span也会一直有动画， 这不是我们想要的效果。
解决方案：
给每个span加个class实现动画， 但在下个span渲染时清除之前span的class， 这样就实现了只有当前的span有动画了.
我这里直接选择了正则匹配粗暴的将class去掉。大家也可以寻找一种更好的方式解决。
代码如下：
实现效果：
源自：https://juejin.im/post/5ddf55835188257313541581
JavaScript代码的三种引入方式【操作演示】
在网页中编写JavaScript代码时，需要先引入JavaScript代码。JavaScript代码有3种引入方式，分别是行内式、嵌入式和外链式，下面分别进行讲解。
行内式是将JavaScript代码作为HTML标签的属性值使用。例如，在单击超链接“test”时，弹出一个警告框提示“Hello”，示例代码如下：
需要说明的是，行内式只有在临时测试或者特殊情况下使用，一般情况下不推荐使用行内式，因为行内式有如下缺点。
(1)行内式可读性较差，尤其是在HTML文件中编写大量JavaScript代码时，不方便阅读。
(2)行内式在遇到多层引号嵌套的情况时，引号非常容易混淆，导致代码出错。
嵌入式(或称内嵌式)使用<scrip>标签包裹JavaScript代码，直接编写到HTML文件中，通常将其放到<head>标签<body>或标签中。<scrip>标签的type属性用于告知浏览器脚本类型，HTML.5中该属性的默认值为“text/javascript”，因此在使用HTML5时可以省略ype属性。嵌入式的示例代码如下：
外链式(或称外部式)是将JavaScript 代码写在一个单独的文件中，一般使用“js”作为文件的扩展名，在HTML页面中使用<script>标签的src属性引人“js”文件。外链式适合javascript代码量较多的情况。在html页面中引入“js”文件，示例代码如下：
上述代码表示引入当前目录下的tesL.js文件。需要注意的是，外链式的标签内不可以编写JavaScript 代码。
为了帮助初学者更好地理解外链式，下面利用外链式实现浏览网页时在页面中自动弹出警告框。创建Example02.html文件，引入Example02.js文件，具体代码如例1-2所示。
标签的src属性设置了要引入的文件为Example02.js。
创建Example02.js文件，在该文件中编写如下代码：
保存代码，在浏览器中访问Example02.html文件，页面效果与例1-1相同。
以上讲解了JavaScript的3种引入方式。现代网页开发中提倡结构、样式、行为的分离，即分离HTML、CSS、JavaScrixt这3部分代码，这样更有利于文件的维护。当需要编写大量的、逻辑复杂的、具有特定功能的JavaScrigt代码时，推荐使用外链式。外链式相比嵌入式，具有以下3点优势：
(1)外链式存在于独立文件中，有利于修改和维护，而嵌人式会导致HTML代码与JavaScript代码混合在一起。
(2)外链式可以利用浏览器缓存提高速度。例如，在多个页面中引入相同的JavaScript文件时，打开第1个页面后，浏览器将JavaScript文件缓存下来，下次打开其他页面时就不用重新下载该文件了。
(3)外链式有利于HTML页h代码结构化，把大段的JavaScript代码分离到HTML页面之外，既美观，也方便文件级别的代码复用。
html5精选特效代码分享（收藏）
在网页设计过程中，我们会经常用到一些HTML5特效代码，下面就是为大家整理分享的一些好看炫酷且实用的HTML5特效代码，可以放心在您的应用程序中使用。
一、Canvas跟随鼠标光标动画特效
演示、下载地址：http://www.php.cn/xiazai/js/845
二、HTML5 Canvas泡泡悬浮鼠标特效
演示、下载地址：http://www.php.cn/xiazai/js/1599
三、HTML5卡通可爱风格网页找不到404错误页面网页模板
演示、下载地址：http://www.php.cn/xiazai/js/2987
四、HTML5-Canvas线条背景动画
演示、下载地址：http://www.php.cn/xiazai/js/2930
五、HTML5-Canvas线条背景动画
演示、下载地址：http://www.php.cn/xiazai/js/2919
六、HTML5-Canvas五彩纸屑飘落动画特效
演示、下载地址：http://www.php.cn/xiazai/js/2917
更多炫酷html5、javascript特效代码，尽在：js特效大全
以上就是html5精选特效代码分享（收藏）的详细内容，更多请关注其它相关文章！
更多技巧请《转发 + 关注》哦！
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
