【JS真好玩】自动打字机效果


目录


一、前言

大家好,今天实现一个自动打字机效果,旨在实现一些网上很小的demo样例,通过每一个小demo能够巩固一下我们的前端基础知识。

今天,主要利用定时器、flex布局实现一个自动打字机效果。

效果展示

考察

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

二、布局分析

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

  1. 总体的背景及布局
  2. 中间部分的文本显示
  3. 底部的速度调节
    • 左侧提示文本
    • 右侧input输入框

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

三、总体样式

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

css 复制代码
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就是当前视口的宽度,这可以让我们打字机的布局更好的适配窗口大小。

四、中间部分

html 复制代码
 <h1 id="text">Starting...</h1>

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

五、底部

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

5.1 div

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

css 复制代码
.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

css 复制代码
label {
    cursor: default;
}

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

问号

css 复制代码
cursor: help;

转圈

css 复制代码
cursor: wait;

十字星号

css 复制代码
cursor: crosshair;

禁止

css 复制代码
cursor: not-allowed;

搜索

css 复制代码
cursor: zoom-in;

小手

css 复制代码
cursor: grab;

5.3 input

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

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

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

六、JS让它动起来

完成了一些页面的基本布局之后,我们就可以使用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

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

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

6.2 字符串处理

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

6.2.1 slice

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

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

js 复制代码
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:插入的值,不写直接删除

js 复制代码
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对象分割成子字符串数组,以一个指定的分割字串来决定每个拆分的位置。

js 复制代码
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布局、定时器、字符串构建的自动打字机小项目,冲冲冲!

相关推荐
百思可瑞教育9 小时前
Vue.config.js中的Webpack配置、优化及多页面应用开发
前端·javascript·vue.js·webpack·uni-app·北京百思教育
星期天要睡觉9 小时前
计算机视觉(opencv)实战十八——图像透视转换
人工智能·opencv·计算机视觉
歪歪1009 小时前
webpack 配置文件中 mode 有哪些模式?
开发语言·前端·javascript·webpack·前端框架·node.js
Morning的呀10 小时前
Class48 GRU
人工智能·深度学习·gru
面向星辰12 小时前
html各种常用标签
前端·javascript·html
拾零吖12 小时前
李宏毅 Deep Learning
人工智能·深度学习·机器学习
华芯邦12 小时前
广东充电芯片助力新能源汽车车载系统升级
人工智能·科技·车载系统·汽车·制造
时空无限13 小时前
说说transformer 中的掩码矩阵以及为什么能掩盖住词语
人工智能·矩阵·transformer
查里王13 小时前
AI 3D 生成工具知识库:当前产品格局与测评总结
人工智能·3d
武子康14 小时前
AI-调查研究-76-具身智能 当机器人走进生活:具身智能对就业与社会结构的深远影响
人工智能·程序人生·ai·职场和发展·机器人·生活·具身智能