Lecture de fichier .txt avec #typing-text
DKsystem
-
DKsystem -
DKsystem -
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>
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:
- Lecture de fichier .txt avec #typing-text
- Fichier bin - Guide
- Fichier epub - Guide
- Fichier rar - Guide
- Comment réduire la taille d'un fichier - Guide
- Fichier .dat - Guide
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).
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).
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.
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.
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!
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!