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/mengqc1995/p/15900450.html