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"> < ...
随机推荐
- day10-好友关注
功能05-好友关注 6.功能05-好友关注 6.1关注和取关 6.1.1需求分析 在探店图文的详情页面中,可以关注发布笔记的作者: 关注和取关:点击关注按钮就会发出请求(上图):http://127. ...
- 2022-04-01：有n个人，m个任务，任务之间有依赖记录在int[][] depends里。 比如: depends[i] = [a, b]，表示a任务依赖b任务的完成， 其中 0 ＜= a ＜
2022-04-01:有n个人,m个任务,任务之间有依赖记录在int[][] depends里. 比如: depends[i] = [a, b],表示a任务依赖b任务的完成, 其中 0 <= a ...
- ET框架6.0分析三、网络通信
概述 ET框架的消息机制贯彻始终,包含Entity消息(Awake,Update ...),自定义(Customer)消息,网络消息等.而ET系统的进程包含了客户端.Gate等各种类型的服务器,进程包 ...
- ImportError: cannot import name 'Bar' from 'pyecharts'
第一步,先确认运行的py文件名称是否为pyecharts.py,如果是,先换个文件名.再运行改过名称后的py文件,不成功就继续往下看. 第二步,在cmd输入pip list,查看当前pyecharts ...
- MMCM and PLL Dynamic Reconfiguration
Reconfiguration is performed through the DRP. The DRP provides access to the configuration bits that ...
- SignalR WebSocket通讯机制
1.什么是SignalR ASP.NET SignalR 是一个面向 ASP.NET 开发人员的库,可简化向应用程序添加实时 Web 功能的过程. 实时 Web 功能是让服务器代码在可用时立即将内容推 ...
- Java(if选择、switch选择、循环)
1.if 选择结构 //语法 if(表达式){ //语句:(表达式为真) }else{ //语句:(表达式为假) } --------------------------------------- 例 ...
- Win32 GUI 汇编
获取句柄 API函数 GetModuleHandle 取模块句柄,lpModuleName 是一个指向模块名称字符串的指针,使用 NULL 获取当前程序句柄. invoke GetModuleHand ...
- Spring Boot实现高质量的CRUD-1
1.前言 在Spring Boot的SMM框架(SpringBoot+Mysql+Mybatis)的WEB项目中,CRUD(增删改查)大致占了50%-70%左右的工作量.提高CRUD的代码质量,提 ...
- 逍遥自在学C语言 | 指针的基础用法
前言 在C语言中,指针是一项重要的概念,它允许我们直接访问和操作内存地址. 可以说,指针是C语言一大优势.用得好,你写程序如同赵子龙百万军中取上将首级:用得不好,则各种问题层出不穷,有种双拳难敌四手的 ...