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

Documents pareils