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"> < ...
随机推荐
- vue【解决方案】页面/路由跳转后，滚动条消失，页面无法滚动
原因解析: vue项目中,页面/路由跳转后,body 的内联样式变成 overflow:hidden 解决方案: 使用路由守卫,在页面/路由跳转后,将body 的overflow设置为auto src ...
- 2022-12-25：etcd可以完全替代zookeeper，原因是k8s用的etcd，不用担心不成熟。请问etcd部署在k3s中，yaml如何写？
2022-12-25:etcd可以完全替代zookeeper,原因是k8s用的etcd,不用担心不成熟.请问etcd部署在k3s中,yaml如何写? 答案2022-12-25: 用户名:root 密码 ...
- 2022-01-16：小明手中有n块积木，并且小明知道每块积木的重量。现在小明希望将这些积木堆起来， 要求是任意一块积木如果想堆在另一块积木上面，那么要求： 1.上面的积木重量不能小于下面的积木重量；
2022-01-16:小明手中有n块积木,并且小明知道每块积木的重量.现在小明希望将这些积木堆起来, 要求是任意一块积木如果想堆在另一块积木上面,那么要求: 1.上面的积木重量不能小于下面的积木重量: ...
- 2022-01-09：整数转换英文表示。将非负整数 num 转换为其对应的英文表示。 示例 1： 输入：num = 123， 输出：“One Hundred Twenty Three“。 力扣273。
2022-01-09:整数转换英文表示.将非负整数 num 转换为其对应的英文表示. 示例 1: 输入:num = 123, 输出:"One Hundred Twenty Three&quo ...
- MD5加密后为0e开头的字符串
QNKCDZO 0e830400451993494058024219903391 s878926199a 0e545993274517709034328855841020 s ...
- 远程desk工具利用总结
NO.1 Todesk 根据目标软件安装情况有以下两种利用方法 1.目标机已有完整版todesk. 1)改配置文件. 老版本可替换至本地查看密码(此法在最近更新的几个版本中已经失效),新版本只可更改密 ...
- celery笔记二之建立celery项目、配置及几种加载方式
本文首发于公众号:Hunter后端 原文链接:celery笔记二之建立celery项目.配置及几种加载方式 接下来我们创建一个 celery 项目,文件夹及目录如下: proj/__init__.py ...
- C++别名的使用
c++中的别名使用,类似引用,在别名中,"&"的意思不再是取地址,而是建立一个指针,直接指向数据.这是一个小例子: #include <iostream> us ...
- 沉思篇-剖析Jetpack的LiveData
上一篇我们讲到了架构组件中的Lifecycle,由于缺少具体的运用,可能缺少直观的感受,今天我们就用Lifecycle实战一回,看看Lifecycle是怎样运用到LiveData中的. LiveDat ...
- matlab转C++——C++中的矩阵运算和矩阵型函数
最近接到一个委托,把matlab代码转译为c++语言,看看能不能提高运行效率. matlab虽然本身具有将程序转化为C++的app库,但是对代码格式有严格的要求: 变量使用之前需要对变量类型和空间大小 ...