点击查看代码 
<!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. 2020-10-01：谈谈golang的空结构体。

    福哥答案2020-10-01:#福大大架构师每日一题# 1.map.value是空结构体,构造集合. 2.通道.只传递信号,不传递数据. 3.切片.不管切片多长,都不会占用空间. 4.仅包含方法的结构 ...

  2. 2021-11-15：四数相加 II。给你四个整数数组 nums1、nums2、nums3 和 nums4 ，数组长度都是 n ，请你计算有多少个元组 (i, j, k, l) 能满足：0 ＜= i,

    2021-11-15:四数相加 II.给你四个整数数组 nums1.nums2.nums3 和 nums4 ,数组长度都是 n ,请你计算有多少个元组 (i, j, k, l) 能满足:0 <= ...

  3. Vue根据时间戳制作倒计时15分钟

    废话不多说直接上代码 <script> export default { data() { return { downTimeShow: true, timer: null, downTi ...

  4. lec-5-Policy Gradients

    直接策略微分 Goal: idea:求最大值:直接求导 tip:利用log导数等式进行变换 具体推导: 理解策略梯度 假定开始policy服从高斯分布,采样得到回报,计算梯度,根据reward增加动作 ...

  5. ABP - 依赖注入(2)

    依赖注入的使用 构造方法注入 这是将服务注入类的最常用方法,是将依赖项注入类的首选方式,也是微软推崇的模式.这样,除非提供了所有构造方法注入的依赖项,否则无法构造类,显示的声明了类必需的服务,使开发人 ...

  6. R数据分析：多项式回归与响应面分析的理解与实操

    今天给大家分享一个新的统计方法,叫做响应面分析,响应面分析是用来探究变量一致性假设的(Congruence hypotheses).本身是一个工程学方法,目前在组织行为学,管理,市场营销等等领域中使用 ...

  7. 解决element-ui下拉框数据过多，导致页面卡顿问题与本地分页功能实现

    效果 前情提要: 最近使用element-ui开发的一个页面,在打开的时候占用cpu非常高,有时候都能达到90%↑.在调试时发现其中一个下拉框的接口返回2k↑的数据.本着有问题问百度的精神,看到主要的 ...

  8. Spring Boot异步请求处理框架

    Spring Boot异步请求处理框架 1.前言 ​ 在Spring Boot项目中,经常会遇到处理时间过长,导致出现HTTP请求超时问题,状态码:502. ​ 例如一个文件导入接口需要导入一个Exc ...

  9. CKS 考试题整理 （01）-NetworkPolicy

    Task 创建一个名为 pod-restriction 的 NetworkPolicy 来限制对在 namespace dev-team 中运行的 Pod products-service 的访问. ...

  10. 1. Spring 简介

    1. Spring 概述 ‍ 官网地址:​https://spring.io/ ‍ Spring 是最受欢迎的企业级 Java 应用程序开发框架,数以百万的来自世界各地的开发人员使用 Spring 框 ...