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

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

小云云original: 2018-03-26 17:37:122481parcourir

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>

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!

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：flux d'événements js et exemples d'applications étenduesArticle suivant：flux d'événements js et exemples d'applications étendues

Articles Liés

Voir plus