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"> < ...
随机推荐
- NC19469 01串
题目链接 题目 题目描述 I used to believe We were burning on the edge of something beautiful Something beautifu ...
- "树形List"与"扁平List"互转（Java实现）
背景:在平时的开发中,我们时常会遇到下列场景 公司的组织架构的数据存储与展示 文件夹层级的数据存储与展示 评论系统中,父评论与诸多子评论的数据存储与展示 ...... 对于这种有层级的结构化数据,就像 ...
- 爬虫之浏览器指纹ja3_hash的更改
浏览器指纹 反爬中会遇到浏览器指纹,它是不会随着你更换 IP 或者 User-Agent 而改变的.并且他们的指纹每次请求也是固定的.只要网站发现某个拥有特定指纹的客户端持续高频率请求网站,它就可以把 ...
- 2022-08-27：以下go语言代码输出什么？A：[0]；B：panic；C：7；D：不清楚。 package main import ( “fmt“ ) func main() { a
2022-08-27:以下go语言代码输出什么?A:[0]:B:panic:C:7:D:不清楚. package main import ( "fmt" ) func main() ...
- 2021-02-23：给定一个正数n，求n的裂开方法数。规定：后面的数不能比前面的数小 。比如4的裂开方法有： 1+1+1+1、1+1+2、1+3、2+2、4，5种，所以返回5。
2021-02-23:给定一个正数n,求n的裂开方法数.规定:后面的数不能比前面的数小 .比如4的裂开方法有: 1+1+1+1.1+1+2.1+3.2+2.4,5种,所以返回5. 福哥答案2021-0 ...
- 2022-02-19：安装栅栏。 在一个二维的花园中，有一些用 (x, y) 坐标表示的树。由于安装费用十分昂贵，你的任务是先用最短的绳子围起所有的树。只有当所有的树都被绳子包围时，花园才能围好栅栏。
2022-02-19:安装栅栏. 在一个二维的花园中,有一些用 (x, y) 坐标表示的树.由于安装费用十分昂贵,你的任务是先用最短的绳子围起所有的树.只有当所有的树都被绳子包围时,花园才能围好栅栏. ...
- Selenium - 元素定位(2) - XPATH进阶
Selenium - 元素定位 XPATH 定位进阶 元素示例 属性定位 # xpath 通过id属性定位 driver.find_element_by_xpath("//*[@id='kw ...
- 2020-06-11-ASP.NET Core Blazor 子组件父组件数据同步的问题
上一篇写数据绑定的文章,写到最后留了一个坑.当子组件绑定父组件的一个字段,并且子组件修改它的时候父组件不能实时进行同步更新UI的问题,最近终于在Blazui作者的指导下搞定了. UserInfo类要实 ...
- 近期SQL优化实战分享
分享一下本周SQL优化的两个场景. 如果能对读者有一定的启发,共同探讨,不胜荣幸. 版本信息:mysql,5.7.19 引擎: innodb 场景1 我们有一张常口表,里面的数据由各种数据源合并而来, ...
- Windows 安装ActiveMq5.16.6
Windows 安装ActiveMq5.16.6 前言 最近因为需要在项目中使用MQ,所以就想在我的老Windows机器上装个ActiveMq. 1. 下载安装 先到Activemq官网下载安装需要版 ...