JS实现动态打字效果

AI摘要
Deepseek提供支持

首先我们先看一下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>
广告
广告图片
温馨提示 : 非特殊注明,否则均为©李联华的博客网原创文章,本站文章未经授权禁止任何形式转载;来自:俄亥俄州·哥伦布 ,欢迎您的访问!
文章链接:https://www.lilianhua.com/js-to-achieve-dynamic-typing-effect.html
请先登录才能参与答题
距本场结束剩 00 00 00 00
轻量应用服务器 2核2G
200M峰值带宽,适用于网站搭建、Web应用、容器环境、电商独立站等
立即前往
扫码进入
扫描二维码购买
文澜千文

文澜千文

请登录以使用此功能。

|
皇冠(danisa)丹麦曲奇黄油饼干原味90g*4 休闲零食送礼喜礼团购早餐 印尼进口 皇冠(danisa)丹麦曲奇黄油饼干原味90g*4 休闲零食送礼喜礼团购早餐 印尼进口
弹窗图片

Linux AI

记不住繁琐的Linux参数?让AI为你精准检索!输入你的需求,一秒锁定标准命令,彻底告别搜索引擎的冗长翻找。

Loading...

请您留言

如有任何关于本站的任何问题,欢迎联系我们,我们会第一时间为您解答。

客服
联系客服咨询

Hi,如果对于本站的任何问题你都可以在此联系到我们,我们会第一时间为您解。

关注微信公众号
QQ联系
立即联系客服
1546482882
lee@8i5.net