js实现自动打字机 | 社区征文

社区征文前端Android

一、前言

现在移动或者网页端开发页面上会出现一些打字机的效果,我们如何实现这个功能呢?今天,主要利用定时器、flex布局实现一个自动打字机效果。

效果展示

考察

  • flex布局、定时器、字符串
  • 建议用时20~35min

二、布局分析

我们主要把自动打字机分成3个部分实现:

  1. 总体的背景及布局

  2. 中间部分的文本显示

  3. 底部的速度调节

    • 左侧提示文本
    • 右侧input输入框

接下来,我们一步步实现这些操作

三、总体样式

先对body的样式进行操作,背景颜色、flex总布局设置

body {
    background-color: darksalmon;
    font-family: 'Roboto', sans-serif;
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

这里大家可能会对代码里面的height值有一些疑惑,什么是100vh?为什么不是px呢?

vm/vh是css3引入的一个新的单位,与视口有关(PC端的可视区域)。

  • vm: 1vm等于视口宽度的1%
  • vh: 1vh等于视口高度的1%
  • vmin:选取vm和vh中最小的那个
  • vmax:选取vm和vh中最大的那个

100vh就是当前视口的宽度,这可以让我们打字机的布局更好的适配窗口大小。

2

四、中间部分

 <h1 id="text">Starting...</h1>

中间部分我们可以直接使用h1标题标签,独占一行。

2

五、底部

<div class="box">
        <label for="speed">Speed:</label>
        <input type="number" name="speed" id="speed" value="1" min="1" max="10" step="1">
</div>

3

5.1 div

底部我们先有一个带有半透明背景颜色的盒子,给这个盒子添加一些样式

.box {
    position: absolute;
    display: block;
    bottom: 20px;
    background: rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    font-size: 18px;
}

底部使用绝对定位,由于父元素没有定位,所以盒子参考页面为基准。

定位

  • 静态定位static:定位的默认值,元素正常显示,定位的属性不可用
  • 相对定位relative:相对于元素一开始的位置定位,不脱离标准流
  • 绝对定位absolute:相对于最近一级带有定位的父级节点,脱标
  • 固定定位fixed:相对于页面视口定位,固定位置
  • 粘性定位sticky:relative 和 fixed 的结合体,能够实线类似吸附的效果,不常用

5.2 label

label {
    cursor: default;
}

这里主要复习的是cursor对于鼠标的图标显示:

问号

cursor: help;

转圈

cursor: wait;

十字星号

cursor: crosshair;

禁止

cursor: not-allowed;

搜索

cursor: zoom-in;

小手

cursor: grab;

5.3 input

#speed {
    width: 50px;
    font-size: 18px;
    padding: 5px;
    border: 0;
    outline: none;
    background-color: darksalmon;
}

html5新增的input,number属性,可以了解一下。

内置验证以拒绝非数字输入。浏览器可能会选择提供步进箭头,让用户可以使用鼠标增加和减少输入的值,或者只需用指尖敲击即可。

六、JS让它动起来

完成了一些页面的基本布局之后,我们就可以使用js代码让文字动起来了。

const textEl = document.querySelector('#text');
const speedEl = document.querySelector('#speed');
const text = "Hello World!";
let count = 1;
let speed = 300 / speedEl.value;

function writeText() {
    textEl.innerHTML = text.slice(0, count);
    count++;
    if (count > text.length) {
        count = 1;
    }
    setTimeout(writeText, speed);
}
writeText();
speedEl.addEventListener('input', (e) => {
    speed = 300 / e.target.value
});

想要让文字像打字机一样动起来,我们只需要定义一个函数,函数里面内置了定时器,让它不断调用就行了。

6.1定时器

前端的定时器有两种,一种是一次性定时器setTimeout,一种是重复性定时器setInterval

img

如上图所示,setTimeout你只有点击一下按钮物体才会向前跑过了15ms就向前跑10px。而对于setInterval只需要点击一次便会每间隔15ms执行一次,页面中的倒计时效果也是这样做的。

我们函数只需要内置setTimeout就行了,每执行一次调用一次。

6.2 字符串处理

通常字符串处理会有好几种方法,而字符串或者数组slice、splice、split傻傻分不清楚咋办?今天一招解决。

6.2.1 slice

slice() 方法提取某个字符串的一部分,并返回一个新的字符串,且不会改动原字符串。

slice(begin,end)截取字符串从begin开始到end-1结束的字符串,支持-遍历。

const str = 'The quick brown fox jumps over the lazy dog.';

console.log(str.slice(31));
// expected output: "the lazy dog."

console.log(str.slice(4, 19));
// expected output: "quick brown fox"

console.log(str.slice(-4));
// expected output: "dog."

console.log(str.slice(-9, -5));
// expected output: "lazy"

适用于字符串或数组

6.2.2 splice

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容,此方法会改变原数组

splice(index, change, value)

index:开始的下标

change:代表删除的元素

value:插入的值,不写直接删除

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

适用于数组

6.3.3 split

split() 方法使用指定的分隔符字符串将一个String对象分割成子字符串数组,以一个指定的分割字串来决定每个拆分的位置。

const str = 'The quick brown fox jumps over the lazy dog.';

const words = str.split(' ');
console.log(words);
//Array ["The", "quick", "brown", "fox", "jumps", "over", "the", "lazy", "dog."]

const chars = str.split('');
console.log(chars);
// ["T", "h", "e", " ", "q", "u", "i", "c", "k", " ", "b", "r"......

const strCopy = str.split();
console.log(strCopy);
// expected output: Array ["The quick brown fox jumps over the lazy dog."]

适用于字符串转为数组

七、总结

今天主要学习了flex布局、定时器、字符串构建的自动打字机小项目,冲冲冲!

234
4
0
2
关于作者
相关产品
评论
未登录
看完啦,登录分享一下感受吧~
暂无评论