【GitHub热前端项目50天50项目】--day04--实现自动输入的效果、自动打字

最新推荐文章于 2023-01-07 10:57:23 发布

秋天code

最新推荐文章于 2023-01-07 10:57:23 发布

阅读量644

点赞数

分类专栏： GitHub50天50项目文章标签：前端 html css

本文链接：https://blog.csdn.net/weixin_55697693/article/details/127263950

版权

GitHub50天50项目专栏收录该内容

8 篇文章 3 订阅

订阅专栏

GitHub热门前端练手项目，纯HTML、CSS、JS实现，50天50个项目，每日一个项目，打卡活动，解读项目中的知识点
GitHub项目官网连接
50Projects in 50 Days

项目展示

实现自动文本效果，还可以调节文本输入的速度

AutoTextEffects

源代码

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Auto Text Effect</title>
  </head>
  <body>
    <h1 id="text">Starting...</h1>

    <div>
      <label for="speed">Speed:</label>
      <input type="number" name="speed" id="speed" value="1" min="1" max="10" step="1">
    </div>

    <script src="script.js"></script>
  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
  box-sizing: border-box;
}

body {
  background-color: darksalmon;
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

div {
  position: absolute;
  bottom: 20px;
  background: rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  font-size: 18px;
}

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

input:focus {
  outline: none;
}

JS

const textEl = document.getElementById('text')
const speedEl = document.getElementById('speed')
const text = 'We Love Programming!'
let idx = 1
let speed = 300 / 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 = 300 / e.target.value)

知识点

HTML

通过一个<label>标签来绑定表单元素

<div>
    <label for="speed">Speed:</label>
    <input type="number" name="speed" id="speed" value="1" min="1" max="10" step="1">
</div>

CSS

没啥说的，都是基本的

JS

定时器

定时器是BOM中的API

JavaScript中有两个定时器的相关方法

setInterval()，按照指定的周期调用函数；方法会不停地调用函数
setTimeOut()在指定的毫秒数后，调用函数

`setTimeout()`

setTimeOut()函数，用来指定某个函数或代码串，在多少毫秒之后执行，它返回一个整数，表示这个定时器的编号，以后可以用这个编号来取消定时器

var timeId = setTimeout(fun | code , delay)

setTimeout()函数接收两个参数，第一个是要延迟执行的函数名或代码串，第二个参数是延迟的毫秒数。

注意：延迟执行的代码必须以字符串的形式，放入setTimeout()中，因为引擎内部使用eval函数，将字符串转为代码。如果推迟的是函数，则可以直接将函数名放入setTimeout()中

<h1>3秒中后会弹出一个警告</h1>
<script>
    var myfun = function(){
        alert('cnmd')
    }
    setTimeout(myfun,3000)
</script>

`setInterval()`

setInterval()与setTimeout()的用法一致。

setInterval(code,milliseconds)

code为调用的函数或代码串

milliseconds为执行周期时间，以毫秒计

<h1>现在的时间是</h1>
<h1 id="time"></h1>
<script>
    var timeId = setInterval(function(){
        var date = new Date()
        document.getElementById('time').innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
    },1000)
    console.log(timeId)
</script>

`clearInterval()`

清除计时器，需要传入计时器的ID

<h1>现在的时间是</h1>
<h1 id="time"></h1>
<button id="bt">时间停止</button>
<script>
    var timeId = setInterval(function(){
        var date = new Date()
        document.getElementById('time').innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
    },1000)
    console.log(timeId)
    document.getElementById('bt').addEventListener('click',() => {window.clearInterval(timeId)})
</script>