贵港网站建设兼职,东营推广营销公司,wordpress 页面 分栏,越南国家建设部网站目录 一、前言二、布局分析三、总体样式四、中间部分五、底部5.1 div5.2 label5.3 input 六、JS让它动起来6.1定时器6.2 字符串处理6.2.1 slice6.2.2 splice6.3.3 split 七、总结 一、前言
大家好#xff0c;今天实现一个自动打字机效果#xff0c;旨在实现一些网上很小的de… 目录 一、前言二、布局分析三、总体样式四、中间部分五、底部5.1 div5.2 label5.3 input 六、JS让它动起来6.1定时器6.2 字符串处理6.2.1 slice6.2.2 splice6.3.3 split 七、总结 一、前言
大家好今天实现一个自动打字机效果旨在实现一些网上很小的demo样例通过每一个小demo能够巩固一下我们的前端基础知识。
今天主要利用定时器、flex布局实现一个自动打字机效果。
效果展示 考察
flex布局、定时器、字符串建议用时20~35min
二、布局分析 我们主要把自动打字机分成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就是当前视口的宽度这可以让我们打字机的布局更好的适配窗口大小。 四、中间部分 h1 idtextStarting.../h1中间部分我们可以直接使用h1标题标签独占一行。 五、底部
div classboxlabel forspeedSpeed:/labelinput typenumber namespeed idspeed value1 min1 max10 step1
/div5.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相对于页面视口定位固定位置粘性定位stickyrelative 和 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 如上图所示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 foxconsole.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布局、定时器、字符串构建的自动打字机小项目冲冲冲
