前言
想到之前做过打字功能，虽说不是一个复杂的功能，但是确实是一个好玩的效果，新平台配上好玩的功能，想想还有那么点妙呢。
不过之前的功能是打一行字，文字内容由一两句话交替出现。突然想起了诗词大会上介绍某首诗的时候，用的逐字逐句出现的展现方式。打字功能也实现这种方式，这个效果有点好玩。
setTimeout才是“真绝色”
每一个我们能看到的展示或者动效，可能都有很多实现方式，这是也是技术魅力的所在，可以让人不断探索新的实现方式。
但是，说到自动打字，我首先想到的还是定时功能。100毫秒的间隔出现1个字，进而呈现出来逐字逐句的动态效果。
vartimer=setTimeout(functiontyping() { // 逐字获取}, 100);
何不来首《侠客行》
侠客行是我很喜欢的唐朝诗仙李白的一首诗。
功能实现
html
- 页面展示很简介，分为两大块，标题和诗文内容；
- 诗文内容部分分为三个块，诗文的标题、诗文的作者、诗文的内容；每个部分添加唯一的id值。
<divclass="center"><divclass="title">自动打字默写《侠客行》</div><divclass="content"><divid="dlsthTitle"></div><divid="dlsthAuthor"></div><divid="dlsth"></div></div></div>
css
- 诗文内容的外边框样式设置，添加了box-shadow属性，边框添加阴影效果是比较常见的方式，增添了视觉上的靓丽效果；
- 诗文内容的换行样式设置，这次是通过设置容器内侧的填充距离，保持诗文的换行效果的展示。
* { padding: 0; margin: 0; } .center { width: 600px; height: auto; margin: 30pxauto; } .title { line-height: 1.2; font-size: 20px; color: #4860d6;font-weight: 300; margin-bottom: 20px; } .content { width: 180px; height: 310px; border: 1pxsolid#4860d6;color: #333;padding: 20px50px; box-shadow: 3px5px5px#4860d6;border-radius: 5px; font-weight: 300; text-align: center; } #dlsthTitle {font-size: 18px; line-height: 1.5; margin-bottom: 10px; font-weight: 300; } #dlsthAuthor {font-size: 13px; line-height: 1.5; margin-bottom: 10px; font-weight: 300; } #dlsth {font-size: 14px; }
js
- 诗文内容，定义为数组对象，数组主要包括诗文的标题、作者、内容三个元素；
- 使用setTimeout函数设置定时任务，进行数组对象的循环，展示每个部分的每个文字；
- 数组每个元素完成展示之后，使用clearTimeout清除定时，释放定时器。
vardlsthList= [ { index: 0, flag: true, id: document.getElementById('dlsthTitle'), content: '《侠客行》', }, { index: 0, flag: false, id: document.getElementById('dlsthAuthor'), content: '唐·李白', }, { index: 0, flag: false, id: document.getElementById('dlsth'), content: '赵客缦胡缨，吴钩霜雪明。银鞍照白马，飒沓如流星。十步杀一人，千里不留行。事了拂衣去，深藏身与名。闲过信陵饮，脱剑膝前横。将炙啖朱亥，持觞劝侯嬴。三杯吐然诺，五岳倒为轻。眼花耳热后，意气素霓生。救赵挥金槌，邯郸先震惊。千秋二壮士，烜赫大梁城。纵死侠骨香，不惭世上英。谁能书阁下，白首太玄经。', }, ]; varlen=dlsthList.length; functiontyping() { dlsthList.map(function (item, index) { if (item.flag) { if (item.index<=item.content.length) { item['id'].innerHTML=item.content.substring(0, item.index++) +'|'; item.timer=setTimeout(typing, 100); } else { item['id'].innerHTML=item.content; clearTimeout(item.timer); if (index!==len-1) { dlsthList[index+1].flag=true; } item.flag=false; } } }); } typing();
效果展示
在线预览平台查看动画效果和完整代码。
总结
虽然是基础版的前端打字效果。
但是偶尔来点这种小效果，为生活增添的小乐趣，甚好。
