Comment afficher un texte façon aéroport en javascript ?

 

par meltech1 |

     
Comment afficher un texte façon aéroport en javascript ?

Vous avez déjà vu les panneaux d'affichage dans un aéroport, les lettres s'affichent une à une en déroulant toutes les autres jusqu'à se stabiliser sur les bonnes lettres. Ce principe est programmable en javascript. C'est ce que nous allons faire avec cet article. Ensuite vous aurez sur votre site Internet un texte qui s'affiche façon aéroport. Voici comment faire.

Quelles sont les fournitures nécessaires ?

  • Internet Explorer
  • Logiciel bloc notes

Étapes de réalisation

1.

Premièrement ouvrez votre site Internet avec "bloc notes". Vous remarquez qu'il y a un programme qui s'affiche. C'est le code source de votre site Internet, celui qui contient les balises dans lesquelles vous allez insérer le programme suivant. Chercher pour commencer la balise <head>.

2.

Dans la balise <head> veuillez insérer le script suivant :
<style type="text/css">
div span{font-size:35px;font-weight:bold}
</style>
<script type="text/javascript">
function go(n,ch){
var nd=document.createElement('span');
nd.appendChild(document.createTextNode(ch));
cadre.appendChild(nd);
this.t=tt();
function tt(){
if(String.fromCharCode(n)!=ch){
if(n<256){n++}else{n=0};
nd.firstChild.data=String.fromCharCode(n);
}
setTimeout(tt,50)
}
}
var cadre;
function init(ch){
cadre=document.getElementById('cadre');
if(/.{1,50}/.test(ch)){
while(cadre.firstChild){
cadre.removeChild(cadre.firstChild)};
for(i=0;i<ch.length;i++){new go(Math.floor(Math.random()*255),ch.charAt(i))}
}
}
</script>.

3.

Ensuite veuillez insérer le script suivant dans la balise <body> :
<div id="cadre" style="margin:100px;text-align:center;"></div>
<p style="margin:100px">
<label for="zone">Texte à afficher façon aéroport</label>
<input type="text" id="zone" onchange="init(this.value)" />
</p>.

4.

Pour terminer enregistrez le tout avec "bloc notes" puis ouvrez avec IE. Vous obtenez une case dans laquelle vous entrez votre texte. Ensuite il s'affiche comme dans les aéroports. Vous avez terminé.

Commentaires

Angelo | 06/10/2013  

Bonjour, merci pour ces codes, mais qui n'ont pas l'air de fonctionner sous FireFox et Thunderbird : est-ce normal ? Merci d'avance, bien cordialement.

Sur le même thème

damneya

Comment ajouter des métadonnées sur iWeb ?

Pour attirer des visiteurs sur un site internet, il est important d’ajouter à son site des métadonnées et des mots-clés qui seront recherchés dans les moteurs de recherche. Pour ajouter des métadonnées sur iWeb sans éditer le code HTLM brut, pre

kat5

Comment utiliser le logiciel Dreamweaver ?

Dreamweaver est un logiciel permettant de concevoir un site Internet. Et comme tout logiciel, il est simple d'utilisation, mais certaines bases sont nécessaires. Alors à vos claviers, à votre souris, nous allons partir à la découverte de ce logiciel

damneya

Comment créer un blog ?

Un blog ou plus exactement un weblog est un site personnel que vous pouvez créer pour vous exprimer sur vos points de vues. Quelles étapes faut-il suivre pour créer un bon blog?

Chercher un article sur Comment fait-on