1- Horloge affichée sur la barre des
tâches
Le Script ci-dessous permet d'afficher
l'horloge système sur la barre des
tâches de la fenêtre du navigateur.
Toute fois cette horloge est celle du
système du client. Si cette dernière est
déréglée alors celle du script le sera
aussi. Mais il est possible de
synchroniser l'horloge du script avec
l'horloge d'un serveur en utilisant un
petit programme PHP. Ceci on va le voir
plus tard.
<html>
<head>
<script language="javascript">
function horloge()
{
dte=new Date();
H=dte.getHours();
M=dte.getMinutes();
S=dte.getSeconds();
setTimeout("horloge()",1000);
if(M<10) M="0"+M;
if(S<10) S="0"+S;
status=H+":"+M+":"+S;
}
</script>
</head>
<body
onLoad="horloge()">
</body>
</html>
2-
Message affiché sur la barre des tâches
lettre après lettre (Amusant)!
Un message que vous avez pré défini dans
le script sera affiché lettre après
lettre sur la barre des tâches de la
fenêtre du navigateur. Le délai entre
l'affichage des caractères est fixé, à
priori, à 100ms.
<html>
<head>
<script
language="javascript">
mess="Message affiché lettre après
lettre sur la barre des tâches ";
len_mess=mess.length;
i=0;
function message()
{
i++;
status=mess.substring(0,i);
setTimeout("message()",100);
if(i>=len_mess)
i=0;
}
</script>
</head>
<body onLoad="message()">
</body>
</html>
3-
Message Défilant sur la barre des tâches
Le message que vous déclarez au
programme défile de droit à gauche sur
la barre des tâches de la fenêtre du
navigateur. Le résultat obtenu ressemble
un peu à l'effet
"slide"
de la balise
<marquee></marquee>
de HTML.
<html>
<head>
<script
language="javascript">
esp="
"; //La variable esp
vaut une chaîne d'espaces
mess="Message défilant de droit à
gauche";
me=esp+mess;
len_esp=esp.length;
len_mess=mess.length;
len_me=me.length;
i=0;
function message()
{
if(i<len_esp)
{
i++;
st=me.substring(i,len_me);
}
status=st;
setTimeout("message()",40);
}
</script>
</head>
<body onLoad="message()">
</body>
</html>
4-
Reproduction du texte en frappant au
clavier
Le script suivant permet de reproduire
le texte saisi dans la zone de texte. La
reproduction se fait directement en
frappant au clavier.
<html>
<head>
<script language="javascript">
function text()
{
document.fo.output.value=document.fo.input.value;
}
</script>
</head>
<body>
<form name="fo">
Entrez votre
texte ici:
<input type="text" name="input"
size="50" onKeyUp="text()"><br>
<input type="text"
name="output" size="50" style="color:orange;
border: solid white; font-size:24pt;
font-family:verdana">
</form>
</body>
</html>
5-
Décompteur de caractères
Un décompteur commençant par 20 se
décrémente à l'ajout de chaque nouveau
caractère jusqu'à ce qu'il arrive à 0.
Dans ce cas la page affiche un message
d'avertissement tout en éliminant les
caractères de dépassement.
<html>
<head>
<script language="javascript">
com=20;
function compt()
{
document.fo.output.value=(com-document.fo.input.value.length)+"
Caractères réstant";
if(document.fo.input.value.length>com)
{
document.fo.input.value=document.fo.input.value.substring(0,com);
document.fo.output.value=0+" Caractères
réstant";
alert("Vous avez
dépassé "+com+" caractères!");
}
}
</script>
</head>
<body onLoad="document.fo.input.value=''">
<form name="fo">
<font face="verdana" size="1">
Entrez votre texte ici:<br>
</font>
<textarea name="input" rows="5"
cols="40" onKeyUp="compt()">
</textarea><br>
<input type="text" name="output"
size="24" value="20 Caractères réstant"
style="color:orange; border: solid white;
font-size:18pt; font-family:verdana">
</form>
</body>
</html>
6-
Album
Photo
(avec effet alpha)
Un album photos constitué de 8 images
que l'on peut défiler avec deux boutons
"Suivants" et "Précédent". Le passage
d'une photo à une autre se fait en
agissant sur l'effet alpha de celle-ci.
C'est pourquoi on doit passer par des
styles CSS pour pouvoir réussir un tel
effet.
[
Prévisualiser le résultat
]
Le script complet est le suivant (Mais
il ne faut pas oublier de créer un
dossier nommé "im" qui contient les 8
images JPEG renommés en 1.jpg, 2.jpg
jusqu'à 8.jpg. Le dossier "im" doit être
placé dans le même répertoire de la page
Web).
<html>
<head>
<script language="javascript">
document.write("<style>");
for(i=0;i<101;i++)
document.write("."+i+"{filter:alpha(opacity="+i+");}");
document.write("</style>");
j=0;
function op(){
setTimeout("op()",10);
document.getElementById("iden").className=j;
if(j<100)
j++;
else
return false;
}
n=1;
function next(){
n++;
if(n==9) n=1;
j=0;
document.images["im"].src="im/"+n+".jpg";
}
function prev(){
n--;
if(n==0) n=8;
j=0;
document.images["im"].src="im/"+n+".jpg";
}
</script>
</head>
<body onLoad="op()">
<div align="center">
<img name="im" src="im/1.jpg" class="50"
id="iden" border="1">
<br><br>
<input type="button" value=" << "
onClick="prev()">
<input type="button" value=" >> "
onClick="next()">
</div>
</body>
</html>
|
