JS让文本以打字效果呈现出来
简单的网页特效: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>