1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Compteur à rebours secondes, minutes et heures dhtml(javascript+html) selon somme versée v. 1.1

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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 26 195 fois - Téléchargée 29 fois

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

Ajouter un commentaire

Commentaires

Signaler
cs_Zeroc00l
Messages postés
370
Date d'inscription
lundi 1 avril 2002
Statut
Membre
Dernière intervention
11 février 2010
Romain128:
Au temps pour moi les lignes sont affichées !
C'est juste que j'avais selectionné vers la droite juste avant et la taille de la fenêtre ne permet pas de tout afficher :)
Par contre la ligne 113 est vide ! Donc tu parles de supprimer quelle ligne ?

semetic:
Quand tu corriges, précise si t'as suivi les conseils de quelqu'un pour qu'on puisse savoir ce qui a été mis à jour et ce que l'on doit nous même mettre à jour !
As-tu corrigé donc ?
Signaler
cs_Zeroc00l
Messages postés
370
Date d'inscription
lundi 1 avril 2002
Statut
Membre
Dernière intervention
11 février 2010
Semetic :
Tu pourrais être un peu plus cohérent dans tes commentaires
Exemple :
//loop="-1"-->infini,"3"--> sonne 3 fois...
et toi tu mets loop = true ... moi qui suis debutant je comprends pas !

Romain128 :
Tu pourra faire des copier coller des lignes dont tu parles la prochaine fois ?
Parce qu'elles ne sont pas affichées !
Elles sont pas si longues et au pire t'auras le droit d'utiliser les points de suspension à partir du moment où on peut determiner de quel ligne tu parles.

Merci !
Signaler
cs_Romain128
Messages postés
89
Date d'inscription
mercredi 9 mars 2005
Statut
Membre
Dernière intervention
7 novembre 2005
-Tu peux remplacer les fonctions document.all par document.GetElementByID, ca sera plus standard.
-Ca marche pas.Suprimme la ligne 113, mets la 114 apres la 112, et ca devrait marcher.
-Ca marche sous FF et IE ;)
Ca marche bien, pas de bug, belle presentation...7/10!
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)