点击查看代码 
<!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. 2023-05-03：给你一棵 二叉树 的根节点 root ，树中有 n 个节点 每个节点都可以被分配一个从 1 到 n 且互不相同的值 另给你一个长度为 m 的数组 queries 你必须在树上执行

    2023-05-03:给你一棵 二叉树 的根节点 root ,树中有 n 个节点 每个节点都可以被分配一个从 1 到 n 且互不相同的值 另给你一个长度为 m 的数组 queries 你必须在树上执行 ...

  2. C++ Primer 5th 阅读笔记：前言

    机器效率和编程效率 Its focus, and that of its programming community, has widened from looking mostly at machi ...

  3. ai问答：使用 Vue3 组合式API 和 TS 封装 echarts 折线图

    使用这个组件时,只需要传入合适的chartData数组,就可以渲染一个折线图,并且响应数据变化. <template> <div ref="chart" styl ...

  4. pikachu靶场学习

    pikachu靶场通关 搭建靶场 1.官网下载https://github.com/zhuifengshaonianhanlu/pikachu 2.把pikachu文件夹放到phpstudy的web服 ...

  5. flask接口参数校验 jsonschema 的使用

    开头 flask接口开发中参数校验可以用到的方法有很多,但是我比较喜欢跟前端的js检验类似,故选用到了 jsonschema 这个参数校验的库 Demo 下面是一个比较全的参数校验的接口,日后方便参考 ...

  6. 2020-10-27：go中select的执行流程是什么？

    福哥答案2020-10-27: ***[2020-10-27:go中select的执行流程是什么?](https://bbs.csdn.net/topics/398044569)

  7. 2022-03-02：k8s安装minio，yaml如何写？

    2022-03-02:k8s安装minio,yaml如何写? 答案2022-03-02: yaml如下: apiVersion: apps/v1 kind: Deployment metadata: ...

  8. 2021-12-21：任务调度器。 给你一个用字符数组 tasks 表示的 CPU 需要执行的任务列表。其中每个字母表示一种不同种类的任务。任务可以以任意顺序执行，并且每个任务都可以在 1 个单位时间

    2021-12-21:任务调度器. 给你一个用字符数组 tasks 表示的 CPU 需要执行的任务列表.其中每个字母表示一种不同种类的任务.任务可以以任意顺序执行,并且每个任务都可以在 1 个单位时间 ...

  9. React笔记-Hooks(九)(非常全面)

    React笔记-Hooks(九) Hooks 概念 React Hooks 的意思是 组件尽量写成纯函数 如果需要外部功能和副作用 就用钩子把外部代码"钩"进来 函数组件和类组件区 ...

  10. AcWing 1022. 宠物小精灵之收服

    宠物小精灵是一部讲述小智和他的搭档皮卡丘一起冒险的故事. 一天,小智和皮卡丘来到了小精灵狩猎场,里面有很多珍贵的野生宠物小精灵. 小智也想收服其中的一些小精灵. 然而,野生的小精灵并不那么容易被收服. ...