Télécharger le script scribe
Transcription
Télécharger le script scribe
file:///J:/scripts/scribe.html 1 sur 2 view-source:file:///J:/scripts/scribe.html 1 <html lang="fr"> 2 3 <head> 4 <title>Texte défilant</title> 5 <meta charset="utf-8"> 6 <script> 7 /* Exemple de texte juste parce que je kiffe 8 <h1>Le dormeur du val</h1><br><br> 9 10 C'est un trou de verdure où chante une rivière, 11 Accrochant follement aux herbes des haillons 12 D'argent ; où le soleil, de la montagne fière, 13 Luit : c'est un petit val qui mousse de rayons.<br><br> 14 15 Un soldat jeune, bouche ouverte, tête nue, 16 Et la nuque baignant dans le frais cresson bleu, 17 Dort ; il est étendu dans l'herbe, sous la nue, 18 Pâle dans son lit vert où la lumière pleut. 19 <br><br> 20 Les pieds dans les glaïeuls, il dort. Souriant comme 21 Sourirait un enfant malade, il fait un somme : 22 Nature, berce-le chaudement : il a froid. 23 <br><br> 24 Les parfums ne font pas frissonner sa narine ; 25 Il dort dans le soleil, la main sur sa poitrine, 26 Tranquille. Il a deux trous rouges au côté droit." 27 */ 28 var texte = "contenu de type 'String'"; //ici on déclare les variables mais elles seront écrasées dans l'appel à la fonction scribe qui les redéfinit 29 var delai = 50; 30 var currentChar = 0; 31 var destination = "bloc"; 32 33 function type() { 34 if (document.getElementById) { //si on récupère une id 35 var dest = document.getElementById(destination); 36 if (dest) { //si la variable existe 37 dest.innerHTML = texte.substr(0, currentChar); //j'écris ds le bloc et j'incrémente à chaque tour le caractère à afficher 38 currentChar++; 39 if (currentChar < texte.length + 1) { //si la variable est plus petite que la longueur du message je lance le timer afin de répéter la fonction 40 timer = setTimeout("type()", delai); 41 } else { //sinon je stoppe le timer 42 clearTimeout(timer); 43 } 44 } 45 } 46 } 47 48 function scribe(texteParam, destParam, delaiParam) { 49 texte = document.forme.texte.value; //texteParam; //je redéfinis toutes les variables et je lance la fonction type --> dédicace à Romain :D 50 destination = destParam; 51 delai = document.forme.delai.value; //delaiParam; 52 currentChar = 0; 53 type(); 54 } 55 </script> 56 57 <style> 58 h1 { 59 font-family: helvetica, arial, sans-serif; 60 } 61 62 #bloc { 63 margin: auto; 64 width: 960px; 65 height: 500px; 66 background: black; 67 color: green; 68 border: 1px solid green; 69 font-family: Garamond, serif; 70 font-size: 22px; 71 font-weight: 100; 72 padding: 10px; 73 overflow: auto; 74 } 75 76 #bloc:first-letter { 77 text-transform: uppercase; 78 } 79 80 #bouton { 81 margin: auto; 82 width: 120px; 83 height: 30px; 84 background: black; 85 color: white; 86 font-family: Arial; 87 font-size: 14px; 88 padding: 10px; 89 text-align: center; 90 line-height: 30px; 91 margin-top: 20px; 92 cursor: pointer; 93 transition: all 0.8s; 94 } 95 96 #bouton:hover { 97 background-color: grey; 98 } 99 100 #forme { 101 margin: auto; 102 margin-top: 10px; 103 width: 500px; 104 text-align: center; 105 } 106 107 #texte { 108 padding: 5px; 109 border: 1px solid grey; 110 font-family: Arial; 111 font-size: 14px; 112 color: black; 113 } 114 115 #delai { 116 font-family: Arial; 117 font-size: 14px; 118 color: black; 119 text-align: right; 120 border: 1px solid grey; 121 } 122 123 .intitule { 124 color: black; 125 font-family: Garamond, serif; 126 font-size: 14px; 127 } 19/05/2015 17:25 file:///J:/scripts/scribe.html 2 sur 2 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 view-source:file:///J:/scripts/scribe.html </style> </head> <body> <div id="bloc"></div> <form id="forme" name="forme"> <textarea id="texte" name="texte" cols="40" rows="5"></textarea> <br> <br> <span class="intitule">Délai : </span> <input type="text" name="delai" id="delai"> <br> <br> <!--<span class="intitule">Fonte : </span><input type="text" name="fonte" id="fonte"><br><br> <span class="intitule">Taille : </span><input type="text" name="taille" id="taille">--> </form> <div id="bouton" onclick="scribe('','bloc',10)">Scribe</div> </body> </html> 19/05/2015 17:25