50projects50days知识点-30-auto-text-effect

示例网址：

https://50projects50days.com/projects/auto-text-effect/
http://50projects.tc.cluski.top/50projects50days/auto-text-effect/

效果：

思路：

在js中使用setTimeout来设置定时，每个一段时间将元素的innerText给更新掉。

在本例子中有一个小技巧，使用String的切片slice方法，切割字符串。

全部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
    }
	// 每次重新设置timeout
    setTimeout(writeText, speed)
}

// 重新计算速度，speed越小，代表速度越快
speedEl.addEventListener('input', (e) => speed = 300 / e.target.value)

上述是使用到setTimeout来做的，当然也可以使用setInterval来做：

const textEl = document.getElementById('text');
const speedInput = document.getElementById('speed');

const text = 'We Love Programming!'
let pos = 1
let speed = 300 / speedInput.value

function processText() {
    textEl.innerText = text.slice(0, pos)
    pos++
    if (pos > text.length) {
        pos = 1
    }
}

let interval = setInterval(() => processText(), speed)

speedInput.addEventListener('input', (e) => {
    speed = 300 / e.target.value

    clearInterval(interval)
    interval = setInterval(() => processText(), speed)
})