JS实现动态打字效果
首先我们先看一下JS：
let divTyping = document.getElementById('text') /*html中的<div id="text">*/ let i = 0, timer = 0, str = '用JS实现动态打字效果' function typing () { if (i <= str.length) { divTyping.innerHTML = str.slice(0, i++) + '_' timer = setTimeout(typing, 500) } else { divTyping.innerHTML = str//结束打字,移除 _ 光标 clearTimeout(timer) } } typing() length 属性可设置或返回数组中元素的数目。
timer = setTimeout(typing, 500)注：这里就是设置时间的。
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。也就是说多少秒之后结束，或者说是多少秒打完。
clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。有开始就有结束
document.getElementById(“ID“) 得到的是一个对象，用 alert 显示得到的是“ object ”，而不是具体的值，它有 value 和 length 等属性，加上 .value 得到的才是具体的值！
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="text">
</div>
</body>
</html>
洗漱包旅行套装 男出差商务洗簌袋便携化妆包女用品洗护大容量
蓝罐（Kjeldsens）曲奇饼干礼盒 454g 丹麦原装进口 休闲零食 节日送礼福利团购
适用于新款车载手机支架无线器快充智能自动感应汽车
皇顺适配名爵MG7汽车用品MG6PRO改装饰配件MG5门槛条ZS保护贴
温馨提示 : 非特殊注明，否则均为©李联华的博客网原创文章，本站文章未经授权禁止任何形式转载;IP地址：18.118.28.217，归属地:俄亥俄州Dublin ，欢迎您的访问!
文章链接：https://www.lilianhua.com/js-to-achieve-dynamic-typing-effect.html
文章链接：https://www.lilianhua.com/js-to-achieve-dynamic-typing-effect.html
