点击查看代码 
<!DOCTYPE HTML>

<html lang="en">

        <head>

                <meta charset="UTF-8">

                <title>javaScript让文本像打字一样输出</title>

        </head>

        <body>

                <span id="demo"></span>

        </body>

        <script language="JavaScript">

                //预设的文字

                var text = '登岳阳楼<br>'

                         + '唐代：杜甫<br>'

                         + '昔闻洞庭水，今上岳阳楼。<br>'

                         + '吴楚东南坼，乾坤日夜浮。<br>'

                         + '亲朋无一字，老病有孤舟。<br>'

                         + '戎马关山北，凭轩涕泗流。<br>' ;

                //文字出现的时间间隔

                var delay = 80 ;

                //初始化变量 i

                var i = 0 ;

                function writeText(){

                        var demo = document.getElementById('demo');

                        //设置 id 为 demo 的对象内的文字为从变量 text 的 0 开始到 i 间的文字加"_"

                        demo.innerHTML = text.slice(0,i++) + "_" ; 

                        if ( i > text.length ) { //当 i 大于 text 的文本长度时

                              i = 0 ; //重设 i 为 0，使文字重新从第一个文字出现

                              //延时执行writeText()函数,5秒时候重新执行

                              setTimeout("writeText()",5000) ;

                        } else {

                              //否则在delay毫秒后再次执行writeText()函数

                              setTimeout("writeText()",delay) ;

                        }

                }

                writeText() ;//调用writeText()函数

        </script>

</html>

转自：https://www.cnblogs.com/suanshu/p/7346584.html

js 文字像打字一样缓缓出现的更多相关文章

  1. js文字向上滚动代码

    js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px;  background:#edfafd; padding-top:2px; ...

  2. js文字展示各种滚动效果

    js文字展示各种滚动效果:http://www.dowebok.com/demo/188/

  3. js文字颜色闪烁

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. textillate.js 文字动画

    textillate.js是一款强大的文字插件,若配合animate.css.fittext.lettering一起使用,这样做出来的文字特效很完美. 在线实例 实例演示 使用方法 <div i ...

  5. Js文字特效—文字段逐个变色循环

    自己用来练习的,附上详细注释,如果有和我一样喜欢并想要学习Dom特效创作的朋友,推荐先系统了解Javascript中Html Dom Object部分的内容,包括常用方法及属性. <!DOCTY ...

  6. js 文字预写匹配

    效果图: demo如下: <!DOCTYPE html> <html> <head> <title>文字预写</title> </he ...

  7. html js文字左右滚动插件

    自己写过很多插件,但都是直接嵌入在了工程里,从来没有拿出来单独封装成一个文件过,这是第一次,希望是一个良好的开端. 一个文字过长而可以左右滚动的插件 <!DOCTYPE html> < ...

  8. three.js 文字显示不出来

    试了下使用three.js加载文字,首先是报了一个这样的错误: Cross origin requests are only supported for HTTP.” 当时很懵逼,去网上查了查,发现是 ...

  9. js文字从左边飞入效果

    贴代码之前,我们先讲一下它的原理,我们使用setInterval,让文字一开始置于屏幕看不到的位置,左右上下都可以,然后让它的位置不断移入到屏幕看得到的位置. 下面上代码: html: <h2 ...

  10. js文字转语音并播放

    这里调用的是百度文字转语音开放API html: <div> <input type="text" id="ttsText"> < ...

随机推荐

  1. 猿人学内部js练习平台习题记录

    猿人学内部js练习平台习题记录 根据课程更新 当前先完成第7题和第10题 第7题 骚操作 请求规律检测1 - post 1)通过fiddler抓包,看看请求头和请求体有什么骚操作的地方,如果没有反爬就 ...

  2. 2022-11-12：以下rust语言代码中，结构体S实现了crate::T1::T2的方法，如何获取方法列表？以下代码应该返回[“m1“,“m2“,“m5“]，顺序不限。m3是S的方法，但并不属于c

    2022-11-12:以下rust语言代码中,结构体S实现了crate::T1::T2的方法,如何获取方法列表?以下代码应该返回["m1","m2"," ...

  3. AcWing 1024. 装箱问题

    有一个箱子容量为 V,同时有 n 个物品,每个物品有一个体积(正整数). 要求 n 个物品中,任取若干个装入箱内,使箱子的剩余空间为最小. 输入格式 第一行是一个整数 V,表示箱子容量. 第二行是一个 ...

  4. python如何利用算法解决业务上的【分单问题】

    分单是很多企业日常工作中非常典型的一项内容,它非常复杂,但同时又极为重要,如何合理的分单是企业管理中一个很重要的课题. 之所以说分单很复杂,是因为影响单据该分给谁,分多少量这个事儿本身就有太多的影响因 ...

  5. linux 条件语句和逻辑判断

    目录 一.条件判断 二.逻辑判断 三.if和case 四.七个实验 一.条件判断 1.test测试 test [ 条件表达式 ] -e:测试目录是否存在 -d:测试是否为目录    -f:是否为文件 ...

  6. C++面试八股文：C和C++有哪些区别？

    某日小二参加XXX科技公司的C++高级工程师开发岗位1面: 面试官:请问C和C++的区别有哪些? 小二:C++是C的超集. 面试官:还有吗? 小二:... 面试官:面试结束,回去等消息吧. 小二:淦. ...

  7. 基于 python3+nginx 的 Jupyter Notebook 服务端 ssl 访问

    引言 Jupyter Notebook(原名 ipython)可是科学计算界的必备工具,友好的界面,方便的交互,支持 Markdown,集中的极客们想要的一切特点,同时又制作的如此优雅和精美,真是难能 ...

  8. 【HMS Core】华为帐号服务，获取Access Token报错{sub_error：20152,error_description：invalid code,error：1101}

    ​ [问题描述] 华为账号服务,接口获取Access Token报错:{sub_error:20152,error_description:invalid code,error:1101} [问题分析 ...

  9. Python初学者友好丨详解参数传递类型

    摘要: 本文清晰地解释了Python中的不同参数传递类型,并提供了示例代码来说明每种类型的用法.对于初学者或不清楚Python传参的读者们来说是非常有益的,文中提供了足够的信息来理解和使用Python ...

  10. postgresql json取值为何这么慢？

    一.缘起 慢sql分析,总行数80w+. 比较特殊的是:其中有个字段info是jsonb类型,写法:info::json->'length' as length 同样的查询条件查这个字段和不查这 ...