【每日一练】37—自动打字效果的实现

每日一练2年前 (2023)更新 admin
2,388 0

前面有个小伙伴问我,电脑打字的效果怎么实现?今天我就来跟大家分享一个这样的小练习,在前面我们写了很多纯CSS实现的效果,今天我们的这个小练习有简单JS的加入,如果你是新入门的小伙伴,也不用害怕,慢慢练习起来就好了。

这个CSS文件和JS文件,我在文章里都是将代码单独分享出来的,如果你们在本地进行练习的时候,请自行创建一个独立空白的CSS文件与JS文件,然后在HTML文件里直接引入就好了,关于CSS文件与JS文件引入的方式有多种,但是,在这里,我推荐大家使用如下方式:

01).CSS文件引入方式:

<link rel=”stylesheet” href=”style.css” />

href为引入CSS文件路径,这个style为文件名称,这个在创建空白CSS文件的时候,自行取一个文件名称,我这边练习,一般都是直接使用style这样的名字。

02).JS文件引入方式:

<script src=”write.js”></script>

src为引入JS文件路径,这个文件名字,大家最好不用随意命名,不然在实际开发中,文件一多,自己都搞不清楚,而且团队开发时,别人也不明白你这个文件是干什么用的,所以,为了方便自己也方便别人,请大家使用一些有实际意义的文件名称。

这个也是我们实际开发中的正确操作方式,请大家从每日的练习中慢慢养成好的习惯。

今天聊的这个内容都是一些基本的知识与习惯,已经知道的小伙伴可以直接忽略。

因为,以上内容主要是针对目前还不知道怎么使用文章中的代码,去实现我们练习效果的小伙伴的。

好了,现在我们一起来看一下今天小练习的最终效果:
【每日一练】37—自动打字效果的实现

这个练习里,有一个设置打字速度的功能,这个功能可以让大家根据内容多少,自行设置文字输出的速度,想学习的你,可以自行实现一下,说不定你还有更好的实现方式哦。

下面我们一起来看看代码吧。

HTML:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<!– CSS文件的引入,在前面说了–>
<link rel=”stylesheet” href=”style.css” />
<title>【每日一练】37—自动打字效果的实现</title>
</head>
<body>
<h1 id=”text”>开始打字</h1>

<div>
<label for=”speed”>设置速度:</label>
<input type=”number” name=”speed” id=”speed” value=”1″ min=”1″ max=”20″ step=”1″>
</div>
<!– JS文件的引入,在前面已经说了,这个也可以放在<head>标签里–>
<script src=”write.js”></script>
</body>
</html>

CSS:

* {
box-sizing: border-box;
}

body {
background-color:#00a6bc;
font-family: sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
h1{margin-left:50px;margin-right:50px;

}
#text{
color:#fff;
}

div {
position: absolute;
bottom: 20px;
font-size: 18px;
background-color: #fff;
opacity:0.8;
}

input {
width: 50px;
padding: 5px;
font-size: 18px;
background-color: #fafafa;
border: none;
text-align: center;
}

input:focus {
outline: none;
}

JS:

const textEl = document.getElementById(‘text’)
const speedEl = document.getElementById(‘speed’)
const text = ‘毛泽东的名作《沁园春·雪》,北国风光,千里冰封,万里雪飘。望长城内外,惟余莽莽;大河上下,顿失滔滔。山舞银蛇,原驰蜡象,欲与天公试比高。须晴日,看红装素裹,分外妖娆。江山如此多娇,引无数英雄竞折腰。惜秦皇汉武,略输文采;唐宗宋祖,稍逊风骚。一代天骄,成吉思汗,只识弯弓射大雕。俱往矣,数风流人物,还看今朝。’
let idx = 1
let speed = 100 / speedEl.value
writeText()
function writeText() {
textEl.innerText = text.slice(0, idx)
idx++
if(idx > text.length) {
idx = 1
}
setTimeout(writeText, speed)
}
speedEl.addEventListener(‘input’, (e) => speed = 100 / e.target.value)

写在最后

以上就是我们今天的【每日一练】的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。

我是杨小爱,我们明天见。

© 版权声明

相关文章

暂无评论

暂无评论...