Explication détaillée de la façon d'implémenter le plug-in de machine à écrire dans le frontal

Cet article vous apporte des connaissances pertinentes sur le front-end. Il explique principalement comment le front-end implémente le plug-in de la machine à écrire. Les amis intéressés peuvent jeter un œil ci-dessous.

Avant-propos

Le front-end réalise l'effet machine à écrire. La méthode trouvée sur Internet en modifiant le nœud dom ne peut pas être utilisée en cross-end. Compte tenu du problème du cross-end, une solution de compatibilité est proposée : utiliser un. fonction de rappel et appelez le rappel à chaque fois que la saisie change. Et jetez la chaîne mise à jour, permettant aux utilisateurs de gérer eux-mêmes le rendu ultérieur, afin qu'elle puisse être multiplateforme et puisse être utilisée normalement sur tous les terminaux.

La machine à écrire la plus simple

const dom = document.querySelector('.content')
const data = '最简单的打字效果代码'.split('')
let index = 0
function writing(index) {
    if (index <p>La machine à écrire la plus simple, ajoutant simplement du texte via une minuterie, grâce à cet exemple, nous pouvons avoir une idée de mise en œuvre spécifique, bien sûr, certains problèmes fonctionnels ou de performances sont encore nécessaires être continuellement optimisé, mais nous pouvons nous en servir comme base pour concevoir un plug-in. </p><h2 data-id="heading-3">1. Ajout d'une animation de suppression en arrière</h2><p>Nous ajoutons donc un état de saisie actuel</p><p>Lorsque l'état est en train de "taper", cela signifie une saisie en avant, sinon cela signifie une suppression en arrière, </p><p>Ensuite, nous traitons la partie de suppression La logique de ceci La partie est la même que celle de l'ajout en avant, et nous devons également changer le statut en « saisie » après la suppression du dernier caractère</p><h2 data-id="heading-4">2. La vitesse d'ajout et de suppression en arrière est contrôlable</h2><p> Ensuite, vous pouvez également personnaliser la vitesse d'ajout et de suppression en arrière. ajouter en avant ou supprimer en arrière, ce qui peut être jugé par l'état actuel</p><h2 data-id="heading-5">3. Le texte d'entrée peut être une seule chaîne ou un tableau de chaînes</h2><p> et prend en charge la transmission d'un tableau de chaînes au lieu d'une seule chaîne, en raison de l'exigence réelle. peut être une rotation entre plusieurs chaînes. Tout d'abord, il n'y a rien à dire sur la logique d'un seul caractère, pour un tableau de chaînes, vous devez ajouter un index pour déterminer quelle chaîne a été atteinte,</p>. <p>Grâce à la fonction changeTextIndex, la chaîne actuelle peut être mise à jour en continu pour obtenir l'effet de boucler le tableau de chaînes</p><p>4 Activer le délai</p><h2 data-id="heading-6">Ajouter un délai entre le début et la fin de la chaîne</h2> <p>Utilisé pour contrôler le temps d'attente. après chaque frappe</p><p>5. Arrêtez de taper</p><h2 data-id="heading-7">Si la machine à écrire fonctionne trop longtemps, étant donné que la couche inférieure est mise en œuvre par une minuterie, elle doit être éteinte lorsqu'elle n'est pas utilisée, pour éviter de gaspiller des performances. une machine à écrire est instanciée sur la page d'accueil, mais la machine à écrire n'est plus nécessaire lors de la saisie d'autres pages, il faut alors l'arrêter. </h2><p>Liez une fonction à l'instance pour arrêter la machine à écrire actuelle. Lorsqu'elle est appelée, la prochaine minuterie se verra attribuer une valeur nulle, arrêtant ainsi la machine à écrire. </p><p>6. Utilisez des rappels pour résoudre les problèmes du mini-programme</p><h2 data-id="heading-8">Dans le code ci-dessus, nous avons modifié le nœud dom pour changer les caractères de la machine à écrire, donc dans le mini-programme ou d'autres API qui n'ont pas de dom ou de modification dom, il n'y aura pas de fonctionne plus Lorsqu'il s'agit d'innerhtml, le plug-in ne peut pas le prendre en charge, il est donc compatible avec lui. La chaîne actuelle est enregistrée via callBackText, puis une fonction est utilisée pour déterminer comment utiliser cette chaîne</h2><p>Lorsqu'il y a un rappel. , Donnez la priorité au rappel de chaîne via le rappel, laissez l'entreprise obtenir la chaîne et traiter elle-même la logique de changement, afin que l'effet de frappe puisse être obtenu n'importe où et ne dépend plus de l'environnement. </p><p>Voici un exemple de mon propre projet uniapp</p><p></p><p><img src="https://img.php.cn/upload/article/000/000/020/a4e713f7104ede389fda47b0c65e7107-1.png" alt="Explication détaillée de la façon dimplémenter le plug-in de machine à écrire dans le frontal" loading="lazy"></p><p><img src="https://img.php.cn/upload/article/000/000/020/924bcf309a473f761e178442d2a375be-2.png" alt="Explication détaillée de la façon dimplémenter le plug-in de machine à écrire dans le frontal" loading="lazy">Effet : </p><p></p><p><img src="https://img.php.cn/upload/article/000/000/020/924bcf309a473f761e178442d2a375be-3.gif" alt="Explication détaillée de la façon dimplémenter le plug-in de machine à écrire dans le frontal" loading="lazy">Bibliothèque typée.js tierce</p><h2 data-id="heading-9">La plupart de la logique fait spécifiquement référence à </h2>[typed.js]-JavaScript bibliothèque d'animations de frappe<p><a href="https://www.php.cn/link/128250b0e8e7e1ea6558acef9834081a" target="_blank" title="https://mattboldt.github.io/typed.js/docs/" ref="nofollow noopener noreferrer"><p>Il s'agit d'un plug-in personnalisé. Les fonctions qu'il prend en charge ne sont pas aussi bonnes que celles de typed.js, mais il est plus léger et peut définir plus de fonctions dont vous avez besoin. </p>
<h2 data-id="heading-10">Résumé</h2>
<p> Sans tenir compte de l'environnement, l'effet de machine à écrire le plus simple consiste à utiliser directement la minuterie pour mettre à jour le texte du contenu du nœud après un certain temps, sur cette base, il peut également être étendu pour mettre à jour un plug-in de machine à écrire plus complet. in.</p>
<p>Apprentissage recommandé : "<a href="https://www.php.cn/course/list/1.html" target="_blank">développement web front-end</a>"</p></a></p>

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!