Table of contents
I. Introduction
Hello everyone, today I will implement an automatic typewriter effect, aiming to realize some small demo samples on the Internet. Through each small demo, we can consolidate our front-end basic knowledge.
Today, timers and flex layouts are mainly used to achieve an automatic typewriter effect.
Effect display :
Inspection :
- flex layout, timer, string
- It is recommended to use 20~35min
2. Layout analysis
We mainly divide the automatic typewriter into three parts:
- General Background and Layout
- Text display in the middle part
- bottom speed adjustment
- left tooltip text
- Right input input box
Next, we implement these operations step by step
3. Overall style
First operate on the body style, background color, flex general layout settings
body {
background-color: darksalmon;
font-family: 'Roboto', sans-serif;
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
Here you may have some doubts about the height value in the code, what is 100vh? Why not px?
vm/vh is a new unit introduced by css3, which is related to the viewport (visible area on the PC side).
- vm: 1vm is equal to 1% of the viewport width
- vh: 1vh is equal to 1% of the viewport height
- vmin: Select the smallest of vm and vh
- vmax: Select the largest of vm and vh
100vh is the width of the current viewport, which allows the layout of our typewriter to better fit the window size.
Four, the middle part
<h1 id="text">Starting...</h1>
In the middle part, we can directly use the h1 title tag, which occupies a single line.
5. Bottom
<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
At the bottom we first have a box with a translucent background color, add some styles to this box
.box {
position: absolute;
display: block;
bottom: 20px;
background: rgba(0, 0, 0, 0.1);
padding: 10px 20px;
font-size: 18px;
}
The bottom uses absolute positioning. Since the parent element is not positioned, the box reference page is the benchmark.
Positioning :
- Static positioning static : the default value of positioning, the element is displayed normally, and the properties of positioning are not available
- Relative positioning relative : positioning relative to the initial position of the element, without departing from the standard flow
- Absolute positioning absolute : relative to the parent node with positioning at the nearest level, off-label
- Fixed positioning fixed : relative to the page viewport positioning, fixed position
- Sticky positioning sticky : a combination of relative and fixed, which can have the effect of solid line similar to adsorption, not commonly used
5.2 label
label {
cursor: default;
}
The main review here is the icon display of the cursor for the mouse:
question mark :
cursor: help;
Turn around :
cursor: wait;
Doji :
cursor: crosshair;
prohibited :
cursor: not-allowed;
Search :
cursor: zoom-in;
little hand :
cursor: grab;
5.3 input
#speed {
width: 50px;
font-size: 18px;
padding: 5px;
border: 0;
outline: none;
background-color: darksalmon;
}
You can learn about the new input and numberattributes of html5.
内置验证以拒绝非数字输入。浏览器可能会选择提供步进箭头，让用户可以使用鼠标增加和减少输入的值，或者只需用指尖敲击即可。
Six, JS makes it move
After completing the basic layout of some pages, we can use js code to make the text move.
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
});
To make the text move like a typewriter, we only need to define a function, which has a built-in timer, and let it be called continuously.
6.1 Timer
There are two types of timers on the front end, one is a one-time timersetTimeout and the other is a repetitive timersetInterval
As shown in the figure above, setTimeoutyou only need to click the button once and the object will run forward after 15ms 10px. And for setIntervalonly one click, it will be executed every 15ms, and the countdown effect on the page is also the same.
Our function only needs setTimeoutto be built in, and it is called once every time it is executed.
6.2 String handling
Usually there are several ways to process strings, but slice、splice、splitwhat if strings or arrays are stupidly unclear? Solve it today.
6.2.1 slice
slice()method extracts a part of a string and returns a new string without changing the original string.
slice(begin, end) intercepts the string from beginthe beginning to end-1the end of the string, and supports -traversal.
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"
Works with strings or arrays
6.2.2 splice
splice()The method modifies the array by deleting or replacing existing elements or adding new elements in place, and returns the modified content in the form of an array. This method will change the original array .
splice(index, change, value)
index : the starting subscript
change : represents the deleted element
value : the inserted value, if you don’t write it, delete it directly
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"]
applies to arrays
6.3.3 split
split()Method splits an object into an array of substrings using the specified delimiter string String, using a specified split string to determine the position of each split.
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."]
Suitable for converting strings to arrays
7. Summary
Today, I mainly learned the small automatic typewriter project of flex layout, timer, and string construction. Go for it!