Maison > Article > interface Web > Présentation d'un exemple d'effet spécial utilisant javascript pour obtenir un effet de saisie de texte

Présentation d'un exemple d'effet spécial utilisant javascript pour obtenir un effet de saisie de texte

伊谢尔伦original: 2017-04-29 14:53:081757parcourir

Ce chapitre présente principalement l'effet de saisie de texte que l'on peut souvent voir lors de la navigation sur le Web. Le code de cette section utilise principalement l'événement onMousedown et l'attribut event.button. Les principales fonctions et utilisations sont les suivantes.
　 • La méthode setTimeout, lorsqu'elle est exécutée, exécute l'expression une et une seule fois après avoir retardé le temps spécifié après le chargement.
　 • La méthode charAt renvoie une valeur de caractère située à la position d'index spécifiée. Le premier caractère de la chaîne a l’index 0, le second l’index 1, et ainsi de suite. Les valeurs d'index en dehors de la plage valide renvoient une chaîne vide.

<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>

Après avoir exécuté le programme, un message d'invite apparaîtra sur la page, puis les caractères apparaîtront un par un. Une fois les caractères affichés un par un de cette manière, attendez que toute l'impression soit terminée pour arrêter l'impression.

Interprétation du programme source
(1) Le programme crée d'abord une couche avec un ID de ttl0 pour un appel facile plus tard. Ce calque est utilisé pour afficher le texte imprimé.
(2) Le programme ajoute l'événement onLoad sur l'élément 6c04bd5ca3fcae76e30b72ad730ca86d Lorsque la page entière est chargée, l'événement est déclenché et la fonction de gestion des événements init() est appelée pour traiter l'événement.
(3) Dans la fonction txtTyper(), utilisez la méthode charAt pour obtenir un certain caractère dans la chaîne. Utilisez l'instruction conditionnelle if pour déterminer si le caractère correspond à la fin. Imprimé sur la page une fois les conditions remplies.
(4) Dans l'instruction if, vous pouvez également utiliser n'importe quelle instruction Javascript légale pour effectuer des opérations plus complexes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Parlons du modèle de boucle d'événements de setTimeoutArticle suivant：Parlons du modèle de boucle d'événements de setTimeout

Articles Liés

Voir plus