点击查看代码 
<!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. 试用「ChatGPT」几周之后

    冷静下来,不吹不黑. 01 最近半年,互联网一款现象级的应用诞生:「ChatGPT」: 其火爆的程度,不输前面的羊了个羊: 最初了解到ChatGPT还是春节的时候,但那时网上的测评还没引起足够的好奇心 ...

  2. 2021-12-28：给定一个二维数组matrix，matrix[i][j] = k代表: 从(i,j)位置可以随意往右跳＜=k步，或者从(i,j)位置可以随意往下跳＜=k步， 如果matrix[i]

    2021-12-28:给定一个二维数组matrix,matrix[i][j] = k代表: 从(i,j)位置可以随意往右跳<=k步,或者从(i,j)位置可以随意往下跳<=k步, 如果mat ...

  3. Jenkins - 安装部署

    Jenkins安装部署 简介 Jenkins是一个开源的软件项目,是基于java开发的一种持续集成工具,用于监控持续重复的工作,提供一个开放易用的软件平台,使软件的持续集成变成可能. 主要用于: 持续 ...

  4. es笔记五之term-level的查询操作

    本文首发于公众号:Hunter后端 原文链接:es笔记五之term-level的查询操作 官方文档上写的是 term-level queries,表义为基于准确值的对文档的查询,可以理解为对 keyw ...

  5. flutter中使用pubspec.yaml更改package name

    在flutter 项目中使用pubspec.yaml文件进行依赖资源相关配置是常有的事 但是刚发现它可以修改name来控制项目包名称,当初创建了不同的项目名git后还到每个文件里去修改import(麻 ...

  6. 用go封装一下封禁功能

    用go封装一下封禁功能 本篇为用go设计开发一个自己的轻量级登录库/框架吧 - 秋玻 - 博客园 (cnblogs.com)的封禁业务篇,会讲讲封禁业务的实现,给库/框架增加新的功能. 源码:http ...

  7. cv学习总结（SVM，softmax）10.24-10.30

    本周完成了SVM课程笔记的阅读,包括SVM的基本原理以及SVM的优化过程,以及实现了SVM的两种损失函数(svm以及softmax)的线性分类器,以及学习了反向传播以及神经网络的初步.其中:svm在测 ...

  8. 【lwip】15-NETCONN接口

    前言 终于到接口层了. 原文:李柱明博客:https://www.cnblogs.com/lizhuming/p/17442931.html ‍ 框架描述 前面我们已经学完了,都知道raw接口了,其实 ...

  9. 高分辨率大图像可缩放 Web 查看器的实践

    高分辨率大图像可缩放 Web 查看器的实践 一.使用 vips 将高分辨率大图像转换为 DZI 安装 vips 具体安装步骤请参考libvips Install. 注意,在 windows 11 中安 ...

  10. Request类源码分析、序列化组件介绍、序列化类的基本使用、常用字段类和参数、反序列化之校验、反序列化之保存、APIVIew+序列化类+Response写的五个接口代码、序列化高级用法之source、序列化高级用法之定制字段的两种方式、多表关联反序列化保存、反序列化字段校验其他、ModelSerializer使用

    目录 一.Request类源码分析 二.序列化组件介绍 三.序列化类的基本使用 查询所有和查询单条 四.常用字段类和参数(了解) 常用字段类 字段参数(校验数据来用的) 五.反序列化之校验 六.反序列 ...