前端小项目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)
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值