涉及的知识点
- flex布局
- 递归
- 闭包
- 定时器
- 标签的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)
}