Compteur à rebours secondes, minutes et heures dhtml(javascript+html) selon somme versée v. 1.1

Commenter

Contenu du snippet

Comme d'habitude, on ne trouve pas toujours exactement ce' qu'on cherche sur Internet, j'ai

décidé de réaliser mon besoin pour moi et les autres.

Requis:
- Changez la valeur "50" par celle que vous convient ou vous la trouviez dans le script puisque

elle réfère à l'unité d'argent correspondante à une heure, "dans mon cas: 50 Dinars Algériens".

Dans une version future probable j'ajouterai un champ pour elle variable.
- Il faut coller ce code dans une page avec extension *.htm ou *.html
- On nécessite plus de composants...mais seulement créer une page vièrge appelée "stop_alarm.htm"

dans le même répertoire ou se trouve lapage contenant le code par exemple "compteur.htm", aussi,

il faut la présence dans le même répertoire d'un fichier WAV, Midi...pour le Beep, si vous ne

voulez pas de beep ou vous n'avez pas un tel fichier, supprimez cette ligne du script en bas:

document.write("<bgsound src='beep.wav' loop='true'>")

Avantages:
- ce script est relativement compact si l'on considère les fonctionnalités que prend en charge
- En cas ou rien ou une valeur non numérique est saisie dans la case à gauche (somme d'argent)

un message d'alerte apparaitera et le curseur se positionne laba et élactionne la case. Des

messages apparaiterons dans la case à l'extrême droite, la même, affiche le nombre totale des

secondes nécessaire pourle fonctionnement du compteur.
- Un compte à rebours en secondes, minutes et heures fonctionnant peut être suspendu, mis en

mlarche de nouveau ou arrêté.
- Après la fin du temps correspondant à la somme d'argent saisie un petit Pop-Up s'ouvrira

contenant un message et produisantun court signal "Beep".
- Possibilité de maniupuler les styles, les messages...
- La case au centre affiche l'état du compteur

Le script (tel qu'il est) fonctionne corrtectement chez moi (Windows XP, IE 6)

Je serai ravis de recevoir vos: commentaires, questions.. à mon e-mail:
sidoummoudz@yahoo.fr

Bonne prog/utilisation

Source / Exemple : 


<!-- Partie HTML -->

<body topmargin="5" marginheight="5" leftmargin="0" marginwidth="0">
<form name="form4">
Sum<input type="text" name="argent" size="5" style="font-family:'Zero Threes'; font-size:14; 

color:lime; background-color:black; border-color:rgb(255,204,0); border-style:inset;">
<input type="button" name="bouton1" value="Valider" onclick="recuperer();ControlNumber()" 

style="font-family:Tahoma; font-weight:bold; color:rgb(204,204,204); background-color:black;">
<input type="button" name="bouton2" value="Arrêt" onclick="javascript:window.location.reload()" 

style="font-family:Tahoma; font-weight:bold; color:rgb(204,204,204); background-color:black;"> 
<input type="button" name="bouton3" value="Pause" onclick="arret1();arret2()" style="font-

family:Tahoma; font-weight:bold; color:rgb(204,204,204); background-color:black;">
<input type="button" name="bouton3" value="Reprendre" onclick="reprendre()" style="font-

family:Tahoma; font-weight:bold; color:rgb(204,204,204); background-color:black;"> 
<input type="text" readonly name="letexte" value="Stopped" size="13" style="font-family:Arial; 

font-weight:bold; color:rgb(51,51,204);"> 
<input type="text" readonly size="3" name="hours" style="font-family:'BM plain'; font-

style:normal; font-weight:normal; font-size:16; color:red; background-color:black;">H &nbsp;
<input type="text" readonly size="3" name="minutes" style="font-family:'BM plain'; font-

style:normal; font-weight:normal; font-size:16; color:red; background-color:black;">M 
<input type="text" readonly size="3" name="seconds" style="font-family:'BM plain'; font-

style:normal; font-weight:normal; font-size:16; color:red; background-color:black;">S &nbsp;
<input type="text" readonly name="amount" size="6" style="font-weight:bold; color:rgb(255,204,0); 

background-color:rgb(0,0,102); border-color:rgb(255,204,0); border-style:inset;" > 
</p>
</form>

<!-- Fin Partie HTML -->

<script><!--

//----------- Récupération Variables--------------//

function recuperer(){
var money=document.all("argent").value;
qnt=Math.floor(money*60/50*60);
if (isNaN(money))
    { document.all("amount").value="not valid"; }
else if (money=='')
    { document.all("amount").value="insert v"; }
else
   {document.all("amount").value=qnt; }
generation=qnt;
}

//----------- La première fonction -------------------//

function ControlNumber() {

money=document.all("argent").value;

if (isNaN(money))
{
alert("Des nombres seulement S.V.P");
document.all("argent").select()
document.all("argent").focus()
}
else if (money=='')
{
alert("Merci de taper une somme d'argent (valeur numérique)");
document.all("argent").focus()
}
else 
{
tick(generation)
accion1=setTimeout("alerte()",money*60/50*60000);
document.form4.letexte.value="Running..."
}
}

//--------- Seconde fonction: Compte à rebours ----------//

function tick(generation) {

  if (generation == 0) {
     return;
  } 

  generation=generation-1
  
document.form4.hours.value=Math.floor(generation/3600);
document.form4.minutes.value=Math.floor((generation-document.form4.hours.value*3600)/60);
document.form4.seconds.value=Math.floor((generation-document.form4.hours.value*3600)-

document.form4.minutes.value*60);
  
  accion2=window.setTimeout("tick("+generation+");", 1000);
}

//----------------- Fonction finale -------------------//
 
function alerte(){
window.clearTimeout(accion2);
document.form4.letexte.value="Finished"
lafenetre=window.open("stop_alarm.htm","","height=110,width=230,titlebar=no")
with(lafenetre){
location.reload()
document.write("<title>------ Message Box ------</title>")
document.write("<bgsound src='beep.wav' loop='true'>")//loop="-1"-->infini,"3"--> sonne 3 fois...
document.write("<center><b><font face='arial' size='2' color='navy'>Temps expiré pour utilisateur 

1</b><br><br>")
document.write("Press the \"OK\" button to turn the alarm off<br>")
document.write("<input type='button' value=' OK ' onClick='javascript:window.close()'></center>")
}
document.all("argent").select()
document.all("argent").focus()
}

//---------- Deux fonctions pour arrêter le compte a rebours visible et interne --------//

function arret1(){
window.clearTimeout(accion1);
document.form4.letexte.value="Suspended"
}

function arret2(){
window.clearTimeout(accion2);
}

//----------------- Redémarrer le compte a rebours ----------------------//

function reprendre(){
delai=qnt-

(document.form4.hours.value*3600+document.form4.minutes.value*60+document.form4.seconds.value)
accion1=setTimeout("alerte()",money*60/50*60000-delai*1000);
lesheures=Math.abs(document.form4.hours.value*3600);
lesminutes=Math.abs(document.form4.minutes.value*60);
lessecondes=Math.abs(document.form4.seconds.value);
afterGener=lesheures+lesminutes+lessecondes;
accion2=setTimeout("tick(afterGener);",1000)
document.form4.letexte.value="Running again..."
}

//--- Fin du script-->
</script>

Conclusion :


Bugs:
- Pour une raison que je n'arrive pas à localiser, conservez la partie HTML "formulaire

essentiellement" en haut et la partie JavaScript en bas mais à part le formulaire, d'autres

codes HTML peuvent y résider (après script).
- Ne pas supprimer ou convertir en champ caché, celui nommé "amount"
- En cas vous décider de multiplier les compteur, ex: compteur1.htm, compteur2.htm et les

assembler dans une page à cadre "index.htm", quelques désagrément pouvent se produire.

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (semetic)