前端小项目5 # AutoTextEffect 文字自动出现效果可改速度

涉及的知识点

1. flex布局
2. 递归
3. 闭包
4. 定时器
5. 标签的innerText拼接空字符串不展示空格

介绍

页面上自动出现文字，可以更改文字显示的速度。

代码

HTML：

<p class="text-line"></p>
<div class="control">
    <label for="speed">速度(单位：毫秒):</label>
    <input type="number" value="5" step="1" id="speed">
</div>

CSS：

body{
    background-color: pink;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.text-line{
    font-weight: bold;
    font-size: 24px;
}
.control{
    position: absolute;
    bottom: 50px;
}

JavaScript:

const text = "Hello world !"
const textEl = document.querySelector(".text-line")
const speedEl = document.querySelector("#speed")
let speed = speedEl.value
let idx = 0

writeText()

speedEl.addEventListener('change',(e)=>{
    speed = e.target.value
})

writeText 方法有两种方案：
1.

function writeText(){
  for(let i = 0;i<text.length;i++){
       ((idx)=>{ 
           setTimeout(()=>{
               textEl.innerText = text.slice(0, idx+1)
               if(idx<text.length-1){
                   textEl.innerText +="_"
               }else{
                   setTimeout(()=>{writeText()},speed*100)
               }
           },speed*100*idx)
       })(i)
   }
}

let idx = 0
function writeText(){
   textEl.innerText = text.slice(0, idx+1)
    idx++
    if(idx>=text.length){
        idx = 0
    }else{
        textEl.innerText +="_"
    }
    setTimeout(writeText,speed*100)
}