Home > Article > Web Front-end > JavaScript implements automatic text output (typing special effects)_javascript skills

JavaScript implements automatic text output (typing special effects)_javascript skills

WBOYOriginal: 2016-05-16 15:42:291565browse

Mainly using setTimeout(), recursion and String.substring();

The effect is like a typist typing.

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus&reg;">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>Document</title>
</head>
<body bgcolor="#ccc" onload="printer();">
  <h2 align="center">文本自动输出</h2>
  <br>
  <br>
  <hr width="400" color="black">
  <br>
 <form align="center">
  <textarea cols="50" rows="30" id="text" style="background-color:#FF99CC; color: #330033; cursor: default; font-family: Arial; font-size: 18px" wrap=virtual></textarea>
 </form>
</body>
<script type="text/javascript">

  //获取textarea对象
  var text=document.getElementById("text");
  //要输出的内容
  var str="  传统的HTML语言不能开发交互式的动态网页，而JavaScript却能很好的做到这一点。JavaScript是一门相当简单易学的网络化编程语言，通过把她和HTML语言相互结合起来，能够实现实时的动态网页特效，这给网页浏览者在浏览网页的同时也提供了某些乐趣。";
  var pos=0;
  //利用递归和setTimeout()实现文字输出
  function printer(){
    text.value=str.substring(0,pos)+"|";
    //判断是否到达结尾.如果是则一秒后再来一遍.
    if(pos++>str.length){
      pos=0;
      setTimeout("printer()",1000);
    }else{
      setTimeout("printer()",50);
    }
  }
</script>
</html>

Method 2: JavaScript to achieve the effect of typing on a computer

<span id="demo"></span>
<script defer>
var text="JavaScript实现的打字效果"  //预定文字
var delay=200             //文字出现的时间间隔
var i=0                //初始化变量 i
function scrollit(){
//设置 id 为 demo 的对象内的文字为从变量 text 的 0 开始到 i 间的文字加"_"
demo.innerText=text.slice(0,i++)+"_"  
if(i>text.length){       //当 i 大于 text 的文本长度时
  i=0              //重设 i 为 0，使文字重新从第一个文字出现
//延时执行scrollit()函数,delay*10是为了让显示完整文字的时间长一点
  setTimeout("scrollit()",delay*10) 
}
  //否则在delay毫秒后再次执行scrollit()函数
else setTimeout("scrollit()",delay)       
}
scrollit() //调用scrollit()函数
</script>

Method three:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>标题页</title>
 <script language=javascript>
var layers =document.layers;
var style=document.all;
var both=layers||style;
var idme=908601;
if(layers)
{ layerRef='document.layers';styleRef ='';}
if(style)
{ layerRef='document.all';styleRef = '.style';}
//开始参数的定义
function writeOnText(obj,str)
{
if(layers)with(document[obj])
{ document.open();document.write(str);document.close();}
if(style)eval(obj+'.innerHTML=str'); 
}
var dispStr=new Array("证监会称将严查利用内幕信息牟取不当利益行为!"); //要出现的文本
var overMe=0;
//逐字显示的方法
function txtTyper(str,idx,objId,objStyle,color1,color2,delay,plysnd)
{
var mystr='',strchar='';
var skip=200;
if (both && idx<=str.length) {
if (str.charAt(idx)=='<'){ while(str.charAt(idx)!='>') idx++;}
if (str.charAt(idx)=='&'&&str.charAt(idx+1)!=' '){ while (str.charAt(idx)!= ';')idx++;}
mystr = str.slice(0,idx);  //返回数组从开始到指定位置的字符串
strchar = str.charAt(idx++);//当前地址的字符
if (overMe==0 && plysnd==1)
{
//针对浏览器的不同，调用不同的显示方法
if (navigator.plugins[0]){
if(navigator.plugins["LiveAudio"][0].type=="audio/basic" && navigator.javaEnabled())
{document.embeds[0].stop();
setTimeout("document.embeds[0].play(false)",100);}
} else if (document.all){
ding.Stop();
setTimeout("ding.Run()",100);}
overMe=1;}else overMe=0;
writeOnText(objId, "<span class="+objStyle+"><font color='"+color1+"'>"+mystr+"</font><font color='"+color2
+"'>"+strchar+"</font></span>");
setTimeout("txtTyper('"+str+"', "+idx+", '"+objId+"', '"+objStyle+"', '"+color1+"', '"+color2+"', "+delay+" ,"+plysnd+")",delay);}}
function init()
{txtTyper(dispStr[0], 0, 'div1', 'style1', '#66CCBB', '#000000', 400, 0);}
</script>
<BODY onload=init()>
<DIV class=style1 id=div1></DIV>
</BODY>
</html>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js supports left and right switching three-dimensional image carousel effect code sharing under keyboard control_javascript skillsNext article：js supports left and right switching three-dimensional image carousel effect code sharing under keyboard control_javascript skills

See more

JavaScript implements automatic text output (typing special effects)_javascript skills

Related articles