Maison > interface Web > js tutoriel > JS réalise le code d'effet apparaissant mot par mot

JS réalise le code d'effet apparaissant mot par mot

小云云
Libérer: 2018-03-26 17:37:12
original
2528 Les gens l'ont consulté

Cet article partage principalement avec vous le code JS pour obtenir l'effet d'apparence mot par mot. Récemment, j'ai vu un effet d'animation mot par mot simple et pratique. J'en ai simplement écrit un moi-même. et vaut la peine d'être économisé.

D'abord le rendu :


Code source :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="showStr"></p>
<p style="display:none" id="string">
逐字出来的效果,哈哈哈哈哈哈哈哈哈
</p>  
<script type="text/javascript">
  var index = 0;  
  var str = document.getElementById("string").innerHTML;  
  setInterval(function() {  
   if(index == str.length) { 
//清除定时器
clearInterval();
//若要让效果无限循环,把index归0即可
// index = 0;
}  
var a = document.getElementById("showStr")
a.innerText = str.substring(0, index++);
},400)
</script>
</body>
</html>
Copier après la connexion

Recommandations associées :

Texte d'information qui apparaît mot par mot en JS qui imite les effets de frappe_Effets de texte

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal