写点什么

「CSS 畅想」自动打字效果,默写首诗来读读

作者:叶一一
  • 2022-10-14
    北京
  • 本文字数:1886 字

    阅读完需:约 1 分钟

「CSS畅想」自动打字效果,默写首诗来读读

前言

想到之前做过打字功能,虽说不是一个复杂的功能,但是确实是一个好玩的效果,新平台配上好玩的功能,想想还有那么点妙呢。

不过之前的功能是打一行字,文字内容由一两句话交替出现。突然想起了诗词大会上介绍某首诗的时候,用的逐字逐句出现的展现方式。打字功能也实现这种方式,这个效果有点好玩。

setTimeout 才是“真绝色”

每一个我们能看到的展示或者动效,可能都有很多实现方式,这是也是技术魅力的所在,可以让人不断探索新的实现方式。

但是,说到自动打字,我首先想到的还是定时功能。100 毫秒的间隔出现 1 个字,进而呈现出来逐字逐句的动态效果。

var timer = setTimeout(function typing() {  // 逐字获取}, 100);
复制代码

何不来首《侠客行》

侠客行是我很喜欢的唐朝诗仙李白的一首诗。

功能实现

html

  • 页面展示很简介,分为两大块,标题和诗文内容;

  • 诗文内容部分分为三个块,诗文的标题、诗文的作者、诗文的内容;每个部分添加唯一的 id 值。

<div class="center">      <div class="title">自动打字默写《侠客行》</div>      <div class="content">        <div id="dlsthTitle"></div>        <div id="dlsthAuthor"></div>        <div id="dlsth"></div>      </div>    </div>
复制代码

css

  • 诗文内容的外边框样式设置,添加了 box-shadow 属性,边框添加阴影效果是比较常见的方式,增添了视觉上的靓丽效果;

  • 诗文内容的换行样式设置,这次是通过设置容器内侧的填充距离,保持诗文的换行效果的展示。

* {        padding: 0;        margin: 0;      }      .center {        width: 600px;        height: auto;        margin: 30px auto;      }      .title {        line-height: 1.2;        font-size: 20px;        color: #4860d6;        font-weight: 300;        margin-bottom: 20px;      }      .content {        width: 180px;        height: 310px;        border: 1px solid #4860d6;        color: #333;        padding: 20px 50px;        box-shadow: 3px 5px 5px #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 清除定时,释放定时器。

var dlsthList = [      {        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: '赵客缦胡缨,吴钩霜雪明。银鞍照白马,飒沓如流星。十步杀一人,千里不留行。事了拂衣去,深藏身与名。闲过信陵饮,脱剑膝前横。将炙啖朱亥,持觞劝侯嬴。三杯吐然诺,五岳倒为轻。眼花耳热后,意气素霓生。救赵挥金槌,邯郸先震惊。千秋二壮士,烜赫大梁城。纵死侠骨香,不惭世上英。谁能书阁下,白首太玄经。',      },    ];    var len = dlsthList.length;    function typing() {      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();
复制代码

效果展示


image

在线预览平台查看动画效果。

https://code.juejin.cn/pen/7087076577485275166

总结

虽然是基础版的前端打字效果。

但是偶尔来点这种小效果,为生活增添的小乐趣,甚好。

发布于: 刚刚阅读数: 2
用户头像

叶一一

关注

掘金优秀创作者 2022-09-01 加入

非职业传道受业解惑前端程序媛,华夏美食、国漫、古风重度爱好者,刑侦、无限流小说初级玩家。

评论

发布
暂无评论
「CSS畅想」自动打字效果,默写首诗来读读_JavaScript_叶一一_InfoQ写作社区