suchen

Heim  >  Artikel  >  Web-Frontend  >  Wir stellen ein Beispiel für einen Spezialeffekt vor, bei dem Javascript verwendet wird, um einen Texteingabeeffekt zu erzielen

Wir stellen ein Beispiel für einen Spezialeffekt vor, bei dem Javascript verwendet wird, um einen Texteingabeeffekt zu erzielen

伊谢尔伦
伊谢尔伦Original
2017-04-29 14:53:081808Durchsuche

In diesem Kapitel wird hauptsächlich der Tippeffekt von Text vorgestellt, der beim Surfen im Internet häufig auftritt. Der Code in diesem Abschnitt verwendet hauptsächlich das Ereignis onMousedown und das Attribut event.button. Die Hauptfunktionen und die Verwendung sind wie folgt.
　 • Wenn die setTimeout-Methode ausgeführt wird, führt sie den Ausdruck einmal und nur einmal aus, nachdem sie die angegebene Zeit nach dem Laden verzögert hat.
　 • Die charAt-Methode gibt einen Zeichenwert zurück, der sich an der angegebenen Indexposition befindet. Das erste Zeichen in der Zeichenfolge hat den Index 0, das zweite den Index 1 und so weiter. Indexwerte außerhalb des gültigen Bereichs geben eine leere Zeichenfolge zurück. 

<html> 
<head> 
<title>打字效果的文字特效</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<script language="Javascript"> 
var layers = document.layers; 
var style = document.all; 
var both = layers || style; 
var idme = 908601; 
if(layers) //如果不是ie浏览器 
{ 
layerRef = &#39;document.layers&#39;; 
styleRef = &#39;&#39;; 
} 
if(style) //如果是ie浏览器 
{ 
layerRef = &#39;document.all&#39;; 
styleRef = &#39;.style&#39;; 
} 
function writeOnText(obj, str) { //函数在页面上打印字符串 
if(layers) { 
with(document[obj]) { 
document.open(); 
document.write(str); //write方法打印字符串 
document.close(); 
} 
} 
if(style) eval(obj+&#39;.innerHTML = str&#39;); //使用innerHTML属性显示字符串 
} 
var dispStr = new Array("phpcn"); //字符串数组 
var overMe = 0; 
function txtTyper(str, idx, idObj, spObj, clr1,clr2, delay, plysnd) //函数:实现打字效果 
{ 
var tmp0 = tmp1 = &#39;&#39;, skip = 100; 
if(both && idx <= str.length) { 
if(str.charAt(idx) == &#39;<&#39;) { 
while(str.charAt(idx) != &#39;>&#39;) idx++; 
idx++; 
} 
if(str.charAt(idx) == &#39;&&#39; && str.charAt(idx+1) != &#39;&#39;) { 
while(str.charAt(idx) != &#39;;&#39;) idx++; 
idx++; 
} 
tmp0 = str.slice(0, idx); 
tmp1 = 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(idObj, "<span class="+spObj+"><font color=&#39;"+clr1+"&#39;>"+tmp0+"</font><font color=&#39;"+clr2+"&#39;>"+tmp1+"</font></span>"); 
//调用writeOnText函数将字符显示在网页上 
setTimeout("txtTyper(&#39;"+str+"&#39;, "+idx+", &#39;"+idObj+"&#39;, &#39;"+spObj+"&#39;, &#39;"+clr1+"&#39;, &#39;"+clr2+"&#39;, "+delay+", "+plysnd+")", delay); 
} 
} 
function init() 
{ 
txtTyper(dispStr[0], 0, &#39;tt10&#39;, &#39;ttll&#39;, &#39;#339933&#39;, &#39;#99FF33&#39;, 300, 0);　//调用txtTyper函数开始打字 
} 
</script> 
</head> 
<body onLoad="init();"> 
<center> 
<h1>打字效果的文字特效</h1> 
<hr /> 
 
<div class="ttll" id="tt10"></div> 
</center> 
</body> 
</html>

Nachdem das Programm ausgeführt wurde, erscheint eine Eingabeaufforderungsmeldung auf der Seite, und dann werden die Zeichen nacheinander angezeigt. Nachdem auf diese Weise Zeichen nacheinander angezeigt werden, warten Sie, bis der gesamte Druckvorgang abgeschlossen ist, um den Druckvorgang zu stoppen.

Interpretation des Quellprogramms
(1) Das Programm erstellt zunächst eine Ebene mit der ID ttl0 für einen späteren einfachen Aufruf. Diese Ebene wird zur Anzeige von gedrucktem Text verwendet.
(2) Das Programm fügt das Ereignis onLoad zum Element 6c04bd5ca3fcae76e30b72ad730ca86d hinzu. Wenn die gesamte Seite geladen ist, wird das Ereignis ausgelöst und die Ereignisbehandlungsfunktion init() aufgerufen.
(3) Verwenden Sie in der Funktion txtTyper() die charAt-Methode, um ein bestimmtes Zeichen in der Zeichenfolge abzurufen. Verwenden Sie die bedingte Anweisung if, um zu bestimmen, ob das Zeichen das Ende erreicht. Wird auf die Seite gedruckt, nachdem die Bedingungen erfüllt sind.
(4) In der if-Anweisung können Sie auch jede beliebige legale Javascript-Anweisung verwenden, um komplexere Vorgänge abzuschließen.

Das obige ist der detaillierte Inhalt vonWir stellen ein Beispiel für einen Spezialeffekt vor, bei dem Javascript verwendet wird, um einen Texteingabeeffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen 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：Lassen Sie uns über das Ereignisschleifenmodell von setTimeout sprechenNächster Artikel：Lassen Sie uns über das Ereignisschleifenmodell von setTimeout sprechen

In Verbindung stehende Artikel

Mehr sehen