简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  JavaScript implementiert die automatische Textausgabe

JavaScript implementiert die automatische Textausgabe

高洛峰
高洛峰Original
2017-02-06 11:07:041518Durchsuche

Verwenden Sie hauptsächlich setTimeout(), recursion und String.substring();

Der Effekt ist wie das Tippen eines Schreibers.

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>Document</title>
</head>
<body bgcolor="#ccc" onload="printer();">
  <h2>文本自动输出</h2>
  <br>
  <br>
  <hr width="400" color="black">
  <br>
 <form>
  <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>

Methode 2: JavaScript erzielt einen Tippeffekt auf dem 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>

Methode 3: 

<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=&#39;document.layers&#39;;styleRef =&#39;&#39;;}
if(style)
{ layerRef=&#39;document.all&#39;;styleRef = &#39;.style&#39;;}
//开始参数的定义
function writeOnText(obj,str)
{
if(layers)with(document[obj])
{ document.open();document.write(str);document.close();}
if(style)eval(obj+&#39;.innerHTML=str&#39;); 
}
var dispStr=new Array("证监会称将严查利用内幕信息牟取不当利益行为!"); //要出现的文本
var overMe=0;
//逐字显示的方法
function txtTyper(str,idx,objId,objStyle,color1,color2,delay,plysnd)
{
var mystr=&#39;&#39;,strchar=&#39;&#39;;
var skip=200;
if (both && idx<=str.length) {
if (str.charAt(idx)==&#39;<&#39;){ while(str.charAt(idx)!=&#39;>&#39;) idx++;}
if (str.charAt(idx)==&#39;&&#39;&&str.charAt(idx+1)!=&#39; &#39;){ while (str.charAt(idx)!= &#39;;&#39;)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=&#39;"+color1+"&#39;>"+mystr+"</font><font color=&#39;"+color2
+"&#39;>"+strchar+"</font></span>");
setTimeout("txtTyper(&#39;"+str+"&#39;, "+idx+", &#39;"+objId+"&#39;, &#39;"+objStyle+"&#39;, &#39;"+color1+"&#39;, &#39;"+color2+"&#39;, "+delay+" ,"+plysnd+")",delay);}}
function init()
{txtTyper(dispStr[0], 0, &#39;div1&#39;, &#39;style1&#39;, &#39;#66CCBB&#39;, &#39;#000000&#39;, 400, 0);}
</script>
<BODY onload=init()>
<DIV class=style1 id=div1></DIV>
</BODY>
</html>

Weitere Artikel zum Thema automatische Textausgabe mit JavaScript finden Sie auf der chinesischen PHP-Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JavaScript-EingabespielcodeNächster Artikel：JavaScript-Eingabespielcode

In Verbindung stehende Artikel

Mehr sehen