J'ai conçu un programme pour taper une chaîne dans un div .
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
var i, speed, thraot, disp;
i = 0;
speed = 90;
thraot = "Jesus is Lord, Forever..."
disp = document.createElement("DIV");
disp.setAttribute('id', 'mytxt');
document.body.appendChild(disp);
disp.innerHTML = "";
function myTyping() {
if (i < thraot.length) {
disp.innerHTML += thraot.charAt(i);
i++;
}
dd = setTimeout(myTyping, speed);
}
setInterval(function() {
myTyping();
}, speed * thraot.length);
</script>
</body>
</html>
Je connais setInterval qui appelle à plusieurs reprises une fonction à une milliseconde définie, mais cela ne fonctionne pas ici.
S'il vous plaît, j'aimerais que vous m'aidiez à le faire fonctionner encore et encore.
3 Réponses :
Vous pouvez réinitialiser i et votre contenu div dans le bloc else.
var i, speed, thraot, disp;
i = 0;
speed = 90;
thraot = "Jesus is Lord, Forever..."
disp = document.createElement("DIV");
disp.setAttribute('id', 'mytxt');
document.body.appendChild(disp);
function myTyping() {
if (i < thraot.length) {
disp.innerHTML += thraot.charAt(i);
i++;
} else {
disp.innerHTML = "";
i=0;
}
dd = setTimeout(myTyping, speed * thraot.length);
}
myTyping();
UPDATE: Ajout d'un exemple sans les données setInterval().
var i, speed, thraot, disp;
i = 0;
speed = 90;
thraot = "Jesus is Lord, Forever..."
disp = document.createElement("DIV");
disp.setAttribute('id', 'mytxt');
document.body.appendChild(disp);
disp.innerHTML = "";
function myTyping() {
if (i < thraot.length) {
disp.innerHTML += thraot.charAt(i);
i++;
} else {
disp.innerHTML = "";
i=0;
}
dd = setTimeout(myTyping, speed);
}
setInterval(function() {
myTyping();
}, speed * thraot.length);
Cet exemple s'exécutera à chaque fois un peu plus vite.
Oui. On ne sait pas si c'est souhaité. Sinon, supprimez l'intervalle et appelez à la place myTypings () .
Oooh Merci mec je gat votre logique. Cela a fonctionné pour moi, mais s'accélère de plus en plus en vitesse ...
Voir le deuxième exemple.
Le deuxième exemple a multiplié throat.length et speed, et l'a utilisé contre ma fonction setTimeout (). Donc, ce n'est pas accepté s'il vous plaît.
Il semble que votre problème provienne de la non-réinitialisation du innerHTML du div et de votre variable i . Vous pouvez définir le délai comme vous le souhaitez. Si vous ne voulez pas que ce soit speed * thraot.length , changez-le.
Merci beaucoup. Il a été corrigé ... Je vous félicite.
Il vous manque i = 0 avant d'appeler myTyping dans setInterval
Si vous souhaitez effacer le texte actuel, réinitialisez également disp.innerHTML = ""
Je dis un grand merci à @ user0103, il a changé mon code en quelque chose d'excellent de bon.
Comment actualiser à plusieurs reprises une fonction d'effet de frappe encore et encore ...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
var i, speed, thraot, disp;
i = 0;
speed = 90;
thraot = "Jesus is Lord, Forever..."
disp = document.createElement("DIV");
disp.setAttribute('id', 'mytxt');
document.body.appendChild(disp);
disp.innerHTML = "";
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
(async function() {
while(true) {
for(let i = 0; i < thraot.length; ++i) {
disp.innerHTML += thraot.charAt(i);
await sleep(speed);
}
await sleep(speed);
disp.innerHTML = "";
}
})();
</script>
</body>
</html>
mais cela fonctionne ..
à plusieurs reprises, en recommençant à partir de J après avoir terminé toute la chaîne ??
J'ai essayé d'ajouter un setInterval pour le faire fonctionner à travers la chaîne encore et encore à plusieurs reprises.
jsfiddle.net/ha0pq4ek
@ user0103 Merci beaucoup ... je ne savais pas trop attendre de dormir.
@Danieluko Pas de problème, il suffit de garder à l'esprit que ce n'est pas vraiment un vrai «sommeil», c'est une promesse avec
attendre après tout