js 文字像打字一样缓缓出现
点击查看代码
<!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 文字像打字一样缓缓出现的更多相关文章
- js文字向上滚动代码
js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px; background:#edfafd; padding-top:2px; ...
- js文字展示各种滚动效果
js文字展示各种滚动效果:http://www.dowebok.com/demo/188/
- js文字颜色闪烁
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- textillate.js 文字动画
textillate.js是一款强大的文字插件,若配合animate.css.fittext.lettering一起使用,这样做出来的文字特效很完美. 在线实例 实例演示 使用方法 <div i ...
- Js文字特效—文字段逐个变色循环
自己用来练习的,附上详细注释,如果有和我一样喜欢并想要学习Dom特效创作的朋友,推荐先系统了解Javascript中Html Dom Object部分的内容,包括常用方法及属性. <!DOCTY ...
- js 文字预写匹配
效果图: demo如下: <!DOCTYPE html> <html> <head> <title>文字预写</title> </he ...
- html js文字左右滚动插件
自己写过很多插件,但都是直接嵌入在了工程里,从来没有拿出来单独封装成一个文件过,这是第一次,希望是一个良好的开端. 一个文字过长而可以左右滚动的插件 <!DOCTYPE html> < ...
- three.js 文字显示不出来
试了下使用three.js加载文字,首先是报了一个这样的错误: Cross origin requests are only supported for HTTP.” 当时很懵逼,去网上查了查,发现是 ...
- js文字从左边飞入效果
贴代码之前,我们先讲一下它的原理,我们使用setInterval,让文字一开始置于屏幕看不到的位置,左右上下都可以,然后让它的位置不断移入到屏幕看得到的位置. 下面上代码: html: <h2 ...
- js文字转语音并播放
这里调用的是百度文字转语音开放API html: <div> <input type="text" id="ttsText"> < ...
随机推荐
- 【Visual Leak Detector】在 VS 高版本中使用 VLD
说明 使用 VLD 内存泄漏检测工具辅助开发时整理的学习笔记. 本篇介绍如何在 VS 高版本中使用 vld2.5.1.同系列文章目录可见 <内存泄漏检测工具>目录 目录 说明 1. 使用前 ...
- ☆常用的Sql语句汇总（DDL/DML）
常用的sql语句汇总 1.获取所有表名.表信息 里面有表注释 数据库种类 sql 备注 mysql -- 获取所有表名.视图名show tables-- 获取 dev_test_data数据库 所有表 ...
- 我的web系统设计规范
以下是我自己在工作中总结的,仅供参考. ·应对所有用户输入进行trim()去除两头空格,若是需要空格的应用 转义代替,不应在js里trim(),而应该在数据库端或后端控制,且只在一处拦截控制,更改策略 ...
- 2022-06-11：注意本文件中，graph不是邻接矩阵的含义，而是一个二部图。 在长度为N的邻接矩阵matrix中，所有的点有N个，matrix[i][j]表示点i到点j的距离或者权重， 而在二部
2022-06-11:注意本文件中,graph不是邻接矩阵的含义,而是一个二部图. 在长度为N的邻接矩阵matrix中,所有的点有N个,matrix[i][j]表示点i到点j的距离或者权重, 而在二部 ...
- 2022-01-26：最优账单平衡。 一群朋友在度假期间会相互借钱。比如说，小爱同学支付了小新同学的午餐共计 10 美元。如果小明同学支付了小爱同学的出租车钱共计 5 美元。我们可以用一个三元组 (x
2022-01-26:最优账单平衡. 一群朋友在度假期间会相互借钱.比如说,小爱同学支付了小新同学的午餐共计 10 美元.如果小明同学支付了小爱同学的出租车钱共计 5 美元.我们可以用一个三元组 (x ...
- 蓝桥杯真题 平面切分（Set自定义去重）
题目详情 资源限制 内存限制:256.0MB C/C++时间限制:1.0s Java时间限制:3.0s Python时间限制:5.0s 问题描述 平面上有 N 条直线,其中第 i 条直线是 y=Ai⋅ ...
- 【python基础】新建/运行python项目
1.新建python项目 在编写程序之前,我们需要新建一个项目(Project),在桌面双击PyCharm的快捷方式,等待片刻,打开如下所示的软件界面.点击New Project 在弹出的对话框中,需 ...
- .Net Core后端架构实战【3-介入IOC控制反转】
摘要:基于.NET Core 7.0WebApi后端架构实战[2-介入IOC控制反转] 2023/04/09, ASP.NET Core 7.0, VS2022 引言 Inversion of Co ...
- shell工具和脚本
Shell脚本 shell 脚本是一种更加复杂度的工具. 大多数shell都有自己的一套脚本语言,包括变量.控制流和自己的语法.shell脚本 与其他脚本语言不同之处在于,shell 脚本针对 she ...
- Proteus运行故障分析（电源、程序等）
问题一.Program file is not specified 原因分析:未加载hex文件. 解决方法:双击芯片,点击Program files,找到hex文件添加进来. 问题二.No power ...