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

在这里插入图片描述


目录

    • 一、前言
    • 二、布局分析
    • 三、总体样式
    • 四、中间部分
    • 五、底部
      • 5.1 div
      • 5.2 label
      • 5.3 input
    • 六、JS让它动起来
      • 6.1定时器
      • 6.2 字符串处理
        • 6.2.1 slice
        • 6.2.2 splice
        • 6.3.3 split
    • 七、总结


一、前言

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

今天,主要利用定时器、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布局、定时器、字符串构建的自动打字机小项目,冲冲冲!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/94273.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java 大厂面试 —— 常见集合篇 List HashMap 红黑树

23Java面试专题 八股文面试全套真题&#xff08;含大厂高频面试真题&#xff09;多线程_软工菜鸡的博客-CSDN博客 常见集合篇-01-集合面试题-课程介绍 02-算法复杂度分析 2 List相关面试题 2.1 数组 2.1.1 数组概述 数组&#xff08;Array&#xff09;是一种用连续的内存空…

【算法专题突破】双指针 - 盛最多水的容器(4)

目录 1. 题目解析 2. 算法原理 3. 代码编写 写在最后&#xff1a; 1. 题目解析 题目链接&#xff1a;11. 盛最多水的容器 - 力扣&#xff08;Leetcode&#xff09; 这道题目也不难理解&#xff0c; 两边的柱子的盛水量是根据短的那边的柱子决定的&#xff0c; 而盛水量…

NIO原理浅析(一)

IO简介 摘抄了下维基百科对IO的定义&#xff0c;Input/Output&#xff0c;输入和输出&#xff0c;通常指数据在存储器或者其他周边设备之间的输出和输入&#xff0c;输入是系统接收到信号或者数据&#xff0c;输出则是从系统发送的信号或数据。 Java IO 读写原理 Java中文件…

Unity网格编程笔记[十]一些网格基础操作的封装(Mesh合并,UV映射,正反面反转,顶点合并,法线求切线计算等)

这里的代码是在 Unity网格编程笔记[五]网格切割 中整合出来的。 这里的mesh可以直接接入到使用mesh的unity组件 一些基础的属性还是要参考 Unity网格编程笔记[零]网格编程基础知识点 Mesh合并 网格的合并&#xff0c;其实底层也没那么复杂。对于三角面&#xff0c;只是顺序…

MyBatis学习简要

目录 什么是MyBatis? MyBatis实现的设想 MyBatis基于配置文件的开发步骤 mybatis的配置文件 Mapper代理开发 配置文件完成增删改查的三步 注解开发 一、条件查询 参数接收时&#xff0c;参数的设置&#xff1a; 动态条件查询&#xff1a; 二、添加功能 步骤&#xf…

SpringBootWeb案例 Part 5

4. 配置文件 员工管理的增删改查功能我们已开发完成&#xff0c;但在我们所开发的程序中还一些小问题&#xff0c;下面我们就来分析一下当前案例中存在的问题以及如何优化解决。 4.1 参数配置化 在我们之前编写的程序中进行文件上传时&#xff0c;需要调用AliOSSUtils工具类&…

基于RUM高效治理网站用户体验入门-价值篇

用户体验 用户体验基本包含访问网站的性能、可用性和正确性。通俗的讲&#xff0c;就是一把通过用户访问测量【设计者】意图的尺子。 本文目的 网站如何传递出设计者的意图&#xff0c;可能页面加载时间太长、或者页面在用户的浏览器中渲染时间太慢&#xff0c;或者第三方设备…

ssm+vue医院医患管理系统源码和论文

ssmvue医院医患管理系统源码和论文077 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm vue.js 摘 要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已…

网络编程套接字(3): 简单的TCP网络程序

文章目录 网络编程套接字(3)4. 简单的TCP网络程序4.1 服务端创建(1) 创建套接字(2) 绑定端口(3) 监听(4) 获取新连接(5) 处理读取与写入 4.2 客户端创建(1)连接服务器 4.3 代码编写(1) v1__简单发送消息(2) v2_多进程版本(3) v3_多线程版本(4) v4_线程池版本 网络编程套接字(3)…

华为数通方向HCIP-DataCom H12-821题库(单选题:141-160)

第141题 Router-LSA 能够描述不同的链路类型&#xff0c;不属于Router LSA 链路类型的是以下哪一项? A、Link Type 可以用来描述到末梢网络的连接&#xff0c;即 SubNet B、Link Type 可以用来描述到中转网络的连接&#xff0c;即 TranNet C、Link Type 可以用来描述到另一…

mac软件安装后打开软件显示损坏

#mac传输安装包后安装后打开软件显示损坏处理方式 以postman为例&#xff0c;输入前面的代码&#xff0c;打开访达&#xff0c;把有问题的软件拉到命令行窗口&#xff0c;确认即可 sudo xattr -r -d com.apple.quarantine /Applications/Postman.app sudo xattr -r -d com.ap…

C语言的发展及特点

1. C语言的发展历程 C语言作为计算机编程领域的重要里程碑&#xff0c;其发展历程承载着无数开发者的智慧和创新。C语言诞生于20世纪70年代初&#xff0c;由计算机科学家Dennis Ritchie在贝尔实验室首次推出。当时&#xff0c;Ritchie的目标是为Unix操作系统开发一门能够更方便…

基于Java+SpringBoot+Vue前后端分离社区医院管理系统设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

JavaScript—BOM

BOM是什么&#xff1f; Browser Object Model是浏览器对象模型 官方&#xff1a;浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构&#xff0c;BOM由多个对象构成&#xff0c;其中代表浏览器窗口的window对象是BOM的顶层对象&#xff0c;其他对象都是该…

HHDESK一键改密功能

HHDESK新增实用功能——使用SSH连接&#xff0c;对服务器/端口进行密码修改。 1 测试 首页点击资源管理——客户端&#xff0c;选择需要修改的连接&#xff1b; 可以先对服务器及端口进行测试&#xff0c;看是否畅通&#xff1b; 右键——测试——ping&#xff1b; 以及右…

【Prometheus】概述及部署

目录 Prometheus 概述 Prometheus 的生态组件 Prometheus 的工作模式 Prometheus 的工作流程 Prometheus 的局限性 部署 Prometheus Prometheust Server 端安装和相关配置 部署 Exporters 监控 MySQL 配置示例 监控 Nginx 配置示例 部署 Grafana 进行展示 部署 Pro…

Git仓库简介

1、工作区、暂存区、仓库 工作区&#xff1a;电脑里能看到的目录。 暂存区&#xff1a;工作区有一个隐藏目录.git&#xff0c;是Git的版本库&#xff0c;Git的版本库里存了很多东西&#xff0c;其中最重要的就是称为stage&#xff08;或者叫index&#xff09;的暂存区&#xf…

javacv基础02-调用本机摄像头并预览摄像头图像画面视频

引入架包&#xff1a; <dependency><groupId>org.openpnp</groupId><artifactId>opencv</artifactId><version>4.5.5-1</version></dependency><dependency><groupId>org.bytedeco</groupId><artifactId…

计算机网络MTU和MSS的区别

在计算机网络中&#xff0c;MTU代表最大传输单元&#xff08;Maximum Transmission Unit&#xff09;&#xff0c;而MSS代表最大分节大小&#xff08;Maximum Segment Size&#xff09;。 1.MTU&#xff08;最大传输单元&#xff09;&#xff1a; MTU是指在网络通信中&#x…

数据库——Redis 常见数据结构以及使用场景分析

文章目录 1. string2. list3. hash4. set5. sorted set 你可以自己本机安装 redis 或者通过 redis 官网提供的在线 redis 环境。 1. string 介绍 &#xff1a;string 数据结构是简单的 key-value 类型。虽然 Redis 是用 C 语言写的&#xff0c;但是 Redis 并没有使用 C 的字符串…
最新文章