纯js实现简单的动态打字效果

最新推荐文章于 2023-07-31 21:11:11 发布
最新推荐文章于 2023-07-31 21:11:11 发布
阅读量1.0k 收藏 5
点赞数
分类专栏： JS 文章标签： javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bin929/article/details/82740783
版权

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function ceshi(){
                var divText = document.getElementById("div2").innerText;//获取需要显示的信息
                var len = divText.length;
                var i = 0;
                window.setInterval(function(){//使用间歇调用函数
                    if(i<=len){
                        document.getElementById("div1").innerText = divText.substring(0,i)+"|";//将要显示的信息逐个添加进要显示的位置
                    }else{
                        window.clearInterval(setInId);//输出结束后停止间歇调用函数
                    }
                    i++;
                },400);

            }

        </script>
    </head>
    <body onload="ceshi()">
        <center>
            <div id="div1" style="background-color: blanchedalmond; height: 50px; width: 100%;"></div>
            <div id="div2" style="display: none;">JS实现简单的动态打字效果</div>
        </center>       
    </body>
</html>
bin929
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现的打字机效果完整实例
10-22
主要介绍了JS实现的打字机效果,结合完整实例形式分析了javascript定时触发自定义函数模拟打字输出效果的相关实现技巧,需要的朋友可以参考下
JS实现的自动打字效果示例
10-20
主要介绍了JS实现的自动打字效果,涉及javascript递归算法、字符串操作及事件函数相关使用技巧,需要的朋友可以参考下
typed.js——动态打印字体插件
ZkSky的博客
06-29 1265
typed.js——动态打印字体插件
js：使用typed.js实现打字动画效果
彭世瑜的博客
07-04 732
JavaScript打字动画库
学习JS，实现自动打字机动效
xingyu_qie的专栏
01-12 3503
用js实现一个自动打字的效果
JS实现打字效果
七十多岁的人了、
01-05 1189
原生js打字效果
IDEA打字冒火花教程
听说你很会玩的博客
01-06 5560
IDEA打字冒火花教程 步骤一：点击进入IDEA的主页面 步骤二：点击文件(file→Settings) 步骤三：选择Plugins 步骤四：点击"Browse repositories" 步骤五：搜索“Power mode ||”,并点击安装(install) 安装： 步骤六：重启IDEA，你的打字冒火花的特效就出来了 视频教程地址：https://page.om.qq.com/p...
有趣的IDEA插件推荐，给你的开发工作增添色彩
55555的博客
04-23 6724
0. 引言 上一期我们介绍了能够提升我们开发效率的IDEA插件，但在茫茫的开发上路上，除了提升我们的开发效率，增加开发的趣味性也同样重要。特别是在压力颇大开发行业，有时候一个有趣的插件或许会给你带来一点温暖。 Nyan Progress Bar 进度条变小猫 Nyan Progress Bar是一款能够让我们的进度条变成一只喵喵的插件，看着它突然想起了以前在我们的黑白屏手机上养电子宠物的时光。也许等待代码编译的时候，看着这只小喵跑来跑去的也不错。 如果你不喜欢猫咪的话，还提供了马里奥、小兔子、小象等，任君
js 打字效果
ruby_xc的博客
12-24 435
html：<span id = "first-default" > This is <p id = "first-words" > </p></span>js：var types = ["abcd.", "efgh.", "ijkl."], words = document.getElementById("first-words"), stopType = false
js实现键盘自动打字效果
10-20
本文主要介绍了基于jQuery实现的简单版键盘自动打字效果，具有很好的参考价值，下面就跟着小编一起来看下吧
JavaScript模拟实现键盘打字效果
10-24
主要介绍了JavaScript模拟实现键盘打字效果,本文直接给出实例代码,需要的朋友可以参考下
Intellij IDEA 常用设置三（插件）
usa_washington的博客
12-30 578
idea 工具插件
IDEA--炫酷特效插件
m0_55588226的博客
11-03 2377
插件名称: Power Mode || 输入特效 : 碎花 / 火焰 / 窗口抖动 ​​​​​​
js打字机效果实现逻辑
qq_61320547的博客
07-31 251
js打字机效果实现逻辑
利用js实现一个动态打字的效果
邢思北的博客
05-21 1029
最近自己在做项目，其中首屏的一段文字不想让其直接显示出来，而是模拟打字的过程，一个字一个字的出现。其实这个效果非常好做，利用定时器和字符串，遍历字符串的索引，将字符写入页面即可，先来看一下效果吧： 因为功能比较简单，并且使主要通过js实现的，我在这里只展示js的代码 JavaScript： window.onload = function(){ // 获取div节点的dom对象 var divNode = document.querySelector('div'); // 需要写入页面的字符串，这里
JS实现类似打字的特效，JS实现打字效果
weixin_42048853的博客
01-02 1391
JS实现类似打字的特效，JS实现打字效果 效果图如下： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现打字特效</title> <!-- 移动设备 --> <meta name="viewport" content="width=device-width, initial-scale=1, s
教你如何实现一个页面自动打字效果
fang_my的博客
02-17 836
最近在写一个类似于。
2010考研管理类联考综合能力答案解析.pdf
最新发布
04-24
考研管理类联考综合能力答案解析，考研真题，考研历年真题，考研管理类联考历年真题，真题解析。
用jquery3.6实现动态打字效果
06-10
你可以使用 jQuery 的 `setInterval` 方法来实现动态打字效果。具体实现步骤如下： 1. 在 HTML 中创建一个包含文本内容的元素，例如一个 `div` 元素。 2. 在 JavaScript 中使用 jQuery 选择该元素，并将要显示的文本内容保存到一个变量中。 3. 使用 jQuery 的 `text` 方法将该元素的文本内容清空。 4. 定义一个 `index` 变量，表示当前要显示的字符在文本内容中的位置，初始值为 0。 5. 使用 `setInterval` 方法循环执行一个函数，该函数每次将文本内容中的下一个字符添加到元素中，并将 `index` 变量加 1，直到显示完全部文本内容为止。 以下是示例代码： HTML: ```html <div id="text"></div> ``` JavaScript: ```javascript $(document).ready(function() { var text = "这是要显示的文本内容。"; var index = 0; var intervalId = setInterval(function() { if (index < text.length) { $('#text').text($('#text').text() + text[index]); index++; } else { clearInterval(intervalId); } }, 100); // 每隔 100 毫秒执行一次函数 }); ``` 在上面的示例代码中，`text` 变量保存要显示的文本内容，`index` 变量表示当前要显示的字符在文本内容中的位置，`intervalId` 变量保存 `setInterval` 方法返回的 ID，用于在显示完全部文本内容后停止循环执行函数。`setInterval` 方法每隔 100 毫秒执行一次函数，该函数每次将文本内容中的下一个字符添加到 `div` 元素中，并将 `index` 变量加 1，直到显示完全部文本内容为止。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值