Lecture de fichier .txt avec #typing-text

Fermé
DKsystem - 16 mars 2022 à 10:19
 DKsystem - 17 mars 2022 à 11:07
Bonjour,

Je suis un passioné de météo spaciale

Je construis un site internet sur wix avec toute les données etc...
voici le lien

https://dimitrichevalley5.wixsite.com/dkenvsysrec

J'ai eu l'idée d'utiliser la fonction type texte pour afficher les dérniers événements à la facon MS DOS qui défile en tapant le texte que j'ai décidé.

Cela fonctionne super bien mais à la moindre news, c'est à moi de faire le changement en modifiant le texte. Une tache qui me prend du temps.

Par ailleur, j'ai trouvé un fichier .txt en ligne mise à jour par la NOAA

Serait-il possible de me trouver un fonction HTML où je puisse par exemple en début mettre un message de bienvenue et ensuite que cela continue de taper le texte du fichier .txt disponible sur:

https://services.swpc.noaa.gov/text/3-day-forecast.txt

Tout en respectant la police d'écriture et la couleur?

Merci d'avance

Salutations

P.S: Mon code Actuel



<!DOCTYPE html>
<html>
<head>

<style>
#typing-text {
color: #45BA01;
border: solid 0px #000000;
text-align: left;
font-family: 'Lucida Console', Monaco, monospace;
overflow: hidden;
background-color: #000000;
font-size: 12px;
padding: 5px;
height: 625px;
width: 625px;
outline: none;
resize: none;
box-sizing: border-box;
}
</style>
</head>
<body>
<textarea id="typing-text" readonly></textarea>


<script>
(function (){
var CharacterPos = 0;
var MsgBuffer = "";
var TypeDelay = 75;
var NxtMsgDelay = 4500;
var MsgIndex = 0;
var delay;
var MsgArray = ["Mon Texte Libre"];

function StartTyping(){
var id = document.getElementById("typing-text");
if (CharacterPos != MsgArray[MsgIndex].length) {
MsgBuffer = MsgBuffer + MsgArray[MsgIndex].charAt(CharacterPos);
id.value = MsgBuffer+"_";
delay = TypeDelay;
id.scrollTop = id.scrollHeight;
} else {
delay = NxtMsgDelay;
MsgBuffer = "";
CharacterPos = -1;
if (MsgIndex!=MsgArray.length-1){
MsgIndex++;
}else {
MsgIndex = 0;
}
}
CharacterPos++;
setTimeout(StartTyping,delay);
}
StartTyping();
})();
</script>




Configuration: Windows / Chrome 99.0.4844.51
A voir également:

3 réponses

Salut,
non HTML ne permet pas cela.
Il faudra utiliser la programmation(ce que n'est pas HTML) éventuellement regardez aussi du côté des flux RSS si cela est possible/fournit par votre source.

Vous pouvez par exemple utiliser directement le fichier JSON fournit à l'adresse que vous indiquez (en rajoutant l'adresse complète du fichier de données JSON, ici je n'ai mis que le dossier qui contient tout les autres , voir celui qui vous intéresse dans le dossier JSON)
https://services.swpc.noaa.gov/
avec JavaScript comme ceci:
https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/JSON

Notez aussi que Wix à ses limites, ne permet pas vraiment de faire des sites de qualité et est une entreprise commerciale aux méthodes douteuses(signifiant à la limite du légal voire illégales comme des facturations abusives et facturations de service qui n'ont pas à l'être).
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
16 mars 2022 à 20:43
Bonjour,

Il ne faut pas confondre le HTML et le JavaScript.

Puisque tu veux récupérer le contenu d'un autre site, il faut donc faire une requête HTTP sur l'URL du fichier texte (à condition que le site l'autorise et ne bloque pas la requête avec des entêtes CORS).
En JavaScript, on peut faire des requêtes HTTP avec la méthode AJAX, qui repose principalement sur l'utilisation de l'objet XMLHttpRequest.
Présentation d’AJAX : https://developer.mozilla.org/fr/docs/Web/Guide/AJAX/Getting_Started
Ou de manière plus moderne, avec l'API Fetch : https://developer.mozilla.org/fr/docs/Web/API/Fetch_API/Using_Fetch

Si cet affichage lettre par lettre fonctionne pour un texte court, il ne semble pas adapté pour un contenu aussi long que ce fichier. Il faudra assez de patience pour voir tout le contenu, d'autant plus que l'affichage boucle de manière infinie, ce qui rend la lecture compliquée et désagréable.
https://jsfiddle.net/L8zkj4fr/

Enfin, avec cet affichage, on est très loin des standards et des bonnes pratiques en terme d'accessibilité, ce qui pénalise ton site de plusieurs manières. Ce genre d'affichage ou d'animation devrait être utilisé de manière décorative.
0
Merci à vous 2 de m'avoir répondu rapidement

Je vais regarder avec Javascript merci beaucoup (je vais galérer car je n'en ai jamais fait)

La lecture est peut etre effectivement lente et obselète mais c'est l'effet voulu! Un côté retro que je souhaite garder. Ce site est avant tout utilisé pour moi même et je n'ai aucune envie de faire bcp de visites!

Salutations!
0