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

最新推荐文章于 2024-03-20 23:03:00 发布

web前端开发V

最新推荐文章于 2024-03-20 23:03:00 发布

阅读量270

点赞数

文章标签： css python html java javascript

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649130268&idx=4&sn=75cc44552c35fdb3b2678771be3d5196&chksm=be58a2b1892f2ba7579aac66f274e31b52d40b7fa14dc1fef3a91b959a292f9cc30cf3985549&scene=126&&sessionid=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文件路径，这个文件名字，大家最好不用随意命名，不然在实际开发中，文件一多，自己都搞不清楚，而且团队开发时，别人也不明白你这个文件是干什么用的，所以，为了方便自己也方便别人，请大家使用一些有实际意义的文件名称。

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

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

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

好了，现在我们一起来看一下今天小练习的最终效果：

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

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

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;
}

JavaScript代码：

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)

写在最后

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

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

学习更多技能

请点击下方公众号

web前端开发V

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【每日一练】37—自动打字效果的实现

写在前面前面有个小伙伴问我，电脑打字的效果怎么实现？今天我就来跟大家分享一个这样的小练习，在前面我们写了很多纯CSS实现的效果，今天我们的这个小练习有简单JS的加入，如果你是新入门的小伙伴，也不用害怕，慢慢练习起来就好了。这个CSS文件和JS文件，我在文章里都是将代码单独分享出来的，如果你们在本地进行练习的时候，请自行创建一个独立空白的CSS文件与JS文件，然后在HTML...
复制链接

扫一扫