Calculatrice simple

Soyez le premier à donner votre avis sur cette source.

Vue 54 467 fois - Téléchargée 6 386 fois

Télécharger le projet

Commenter

Description

Je sais qu'il y a déja des srcipts pour la calculatrice mais celle-ci est plus simple et on peut l'ouvrir dans une pop-up (pour que le visiteur ait toujours la calculatrice sous la main).

Vous devez créer deux pages, une pour la calculatrice (page 1) et l'autre pour ouvrir cet page dans une pop-up (page 2).

Source / Exemple :

// PAGE 1 ! 

<html>
<head>
<title>Calculatrice Simple</title>

<script language="JavaScript">

function verification(entree) {
  var car ="1234567890[]()+-.*,/";
  for (var i = 0; i < entree.length; i++)
   if (car.indexOf(entree.charAt(i))<0 ) return false;
  return true;
 }

 function calcul() {
   var a = 0;
  if (verification(window.document.calculatrice.result.value))
     a = eval(window.document.calculatrice.result.value);
   window.document.calculatrice.result.value = a;
 }

 function ajouter(caracteres) {
   window.document.calculatrice.result.value =
   window.document.calculatrice.result.value + caracteres;
 }

 function fonction_speciale(fonction) {
   if (verification(window.document.calculatrice.result.value)) {
     if(fonction == "sqrt") {
       var a = 0;
     a = eval(window.document.calculatrice.result.value);
     window.document.calculatrice.result.value = Math.sqrt(a);
   }
   if(fonction == "pow") {
     var a = 0;
     a = eval(window.document.calculatrice.result.value);
     window.document.calculatrice.result.value = a * a;
   }
   if(fonction == "log") {
     var a = 0;
     a = eval(window.document.calculatrice.result.value);
     window.document.calculatrice.result.value = Math.log(a);
   }
  } else window.document.calculatrice.result.value = 0
}

</script>
</head>
<body>
<table border bgcolor=#0001cc>
<th>
<form name="calculatrice">
<center>
<textarea style="WIDTH: 186px; HEIGHT: 24px; TEXT-ALIGN:right;" name="result" align="right" class="affiche"></textarea><br>
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b2" value="7" onClick="ajouter('7')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b3" value="8" onClick="ajouter('8')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b4" value="9" onClick="ajouter('9')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b12" value=":" onClick="ajouter('/')" size="30"><br>
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b5" value="4" onClick="ajouter('4')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b6" value="5" onClick="ajouter('5')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b7" value="6" onClick="ajouter('6')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b11" value="x" onClick="ajouter('*')" size="30"><br>
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b8" value="1" onClick="ajouter('1')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b9" value="2" onClick="ajouter('2')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b10" value="3" onClick="ajouter('3')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b13" value="-" onClick="ajouter('-')" size="30"><br>
<input style="FONT-WEIGHT: bold; WIDTH: 92px; HEIGHT: 24px" type="button" name="b14" value="0" onClick="ajouter('0')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b15" value="." onClick="ajouter('.')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b16" value="+" onClick="ajouter('+')" size="30"><br>
<input style="FONT-WEIGHT: bold; WIDTH: 140px; HEIGHT: 24px" type="reset" name="b17" value="ON/C" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b18" value="=" onClick="calcul()" size="30"><br>
<input style="FONT-WEIGHT: bold; WIDTH: 60px; HEIGHT: 24px" type="button"  class="button" value="sqrt " onClick="fonction_speciale('sqrt')">
<input style="FONT-WEIGHT: bold; WIDTH: 60px; HEIGHT: 24px" type="button"  class="button" value=" pow " onClick="fonction_speciale('pow')">
<input style="FONT-WEIGHT: bold; WIDTH: 60px; HEIGHT: 24px" type="button"  class="button" value=" log " onClick="fonction_speciale('log')">
</center>
</form>
</th>
</table>

</body>
</html>

// PAGE 2 !

<html>

<head>
<title>Calculatrice Simple</title>
</head>

<body vlink="#0000FF">

<p><a href="calcul.htm" target="popup"
onmouseover="this.style.color='red'"
onmouseout="this.style.color='blue'"
onclick="window.open('','popup','width=218,height=215,left=100,top=100,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,status=no')">Calculatrice</a>
</p>
</body>
</html>

Conclusion :

Voilà, et puis regardez le fichier zip si vous ne comprennez pas ou si ça ne marche pas

Télécharger le projet

Codes Sources

A voir également

Calculatrice javascript
Calculatrice en javascript - Meilleures réponses
Calculatrice js - Meilleures réponses
Afficher résultat calcul javascript ✓ - Forum - Javascript / DHTML
Calculatrice javascript formulaire ✓ - Forum - Javascript / DHTML
Calcul dans un formulaire - Forum - Javascript / DHTML
Javascript : Une calculatrice javascript - CodeS SourceS - Guide
Javascript : Calculatrice javascript - CodeS SourceS - Guide

Ajouter un commentaire Commentaires

Signaler

hamdi
1 juin 2015 à 16:15

<!DOCTYPE html>
<html>
<head ><title> calculatrice </title>
<meta charset="UTF-8">
<style>
input{font-weight:bold;}
input[type=button]{width:25px;}
input[type=text]{width:103px; text-align:right; padding-right:5px;}
input[type=reset]{width:112px;}
</style>
<script>
var a, b;
var SelectedOp="";
var OpClicked=false;
function entrer(x){
switch (x) {
case '1': if (document.getElementById("label").value=="0" || OpClicked==true) document.getElementById("label").value="1";
else document.getElementById("label").value+="1";
break;
case '2': if (document.getElementById("label").value=="0" || OpClicked==true) document.getElementById("label").value="2";
else document.getElementById("label").value+="2";
break;
case '3': if (document.getElementById("label").value=="0" || OpClicked==true) document.getElementById("label").value="3";
else document.getElementById("label").value+="3";
break;
case '4': if (document.getElementById("label").value=="0" || OpClicked==true) document.getElementById("label").value="4";
else document.getElementById("label").value+="4";
break;
case '5': if (document.getElementById("label").value=="0" || OpClicked==true) document.getElementById("label").value="5";
else document.getElementById("label").value+="5";
break;
case '6': if (document.getElementById("label").value=="0" || OpClicked==true) document.getElementById("label").value="6";
else document.getElementById("label").value+="6";
break;
case '7': if (document.getElementById("label").value=="0" || OpClicked==true) document.getElementById("label").value="7";
else document.getElementById("label").value+="7";
break;
case '8': if (document.getElementById("label").value=="0" || OpClicked==true) document.getElementById("label").value="8";
else document.getElementById("label").value+="8";
break;
case '9': if (document.getElementById("label").value=="0" || OpClicked==true) document.getElementById("label").value="9";
else document.getElementById("label").value+="9";
break;
case '0': if (document.getElementById("label").value=="0" || OpClicked==true) document.getElementById("label").value="0";
else document.getElementById("label").value+="0";
break;
case '.': document.getElementById(".").disabled=true;
document.getElementById("label").value+=".";
break;

}
OpClicked=false;
}

function faire(x){
document.getElementById(".").disabled=false;
OpClicked=true;
SelectedOp=x;
a=document.getElementById("label").value;
}

function calculer(){
var b=document.getElementById("label").value;
switch (SelectedOp) {
case '+': document.getElementById("label").value=parseFloat(a)+parseFloat(b); break;
case '-': document.getElementById("label").value=parseFloat(a)-parseFloat(b); break;
case '*': document.getElementById("label").value=parseFloat(a)*parseFloat(b); break;
case '/': if (b!=0) document.getElementById("label").value=parseFloat(a)/parseFloat(b);
else document.getElementById("label").value="impossible sur 0 !";
break;
}
SelectedOp="";
}

</script>
</head>

<body>
<form>
<input type="text" value="0" id="label" readonly > <br/>
<input type="button" value="1" id="1" onclick="entrer('1');">
<input type="button" value="2" id="2" onclick="entrer('2');">
<input type="button" value="3" id="3" onclick="entrer('3');">
<input type="button" value="+" id="+" onclick="faire('+');"><br/>
<input type="button" value="4" id="4" onclick="entrer('4');">
<input type="button" value="5" id="5" onclick="entrer('5');">
<input type="button" value="6" id="6" onclick="entrer('6');">
<input type="button" value="-" id="-" onclick="faire('-');"><br/>
<input type="button" value="7" id="7" onclick="entrer('7');">
<input type="button" value="8" id="8" onclick="entrer('8');">
<input type="button" value="9" id="9" onclick="entrer('9');">
<input type="button" value="*" id="*" onclick="faire('*');"><br/>
<input type="button" value="0" id="0" onclick="entrer('0');">
<input type="button" value="." id="." onclick="entrer('.');">
<input type="button" value="=" id="=" onclick="calculer();">
<input type="button" value="/" id="/" onclick="faire('/');"><br/>
<input type="reset" value="C">
</form>
</body>
</html>

Signaler

@karamel

Messages postés: 1782
Date d'inscription: vendredi 9 mai 2008
Statut: Modérateur
Dernière intervention: 14 janvier 2021

118
14 mai 2008 à 20:21

te prend pas trop la tete javascript a la réputation de ne pas être d'une précision imparable en calcule

Signaler

meryem480

Messages postés: 1
Date d'inscription: mercredi 25 octobre 2006
Statut: Membre
Dernière intervention: 25 octobre 2006

25 oct. 2006 à 19:36

mon problème c'est avec 12,2,5*/25 ; ça existe pas mais il faut faire
un contrôleur de virgule
je veu un resultat

Signaler

Nono8379

Messages postés: 6
Date d'inscription: samedi 10 janvier 2004
Statut: Membre
Dernière intervention: 4 juillet 2006

4 juil. 2006 à 17:01

http://www.thescripts.com/forum/thread91162.html

en gros (tres gros...) c'est lié à la représentation des chiffres dans javascript. Donc çà va être difficile d'utiliser directement la fonction eval si tu veux un résultat précis...

Signaler

cs_lgh

Messages postés: 41
Date d'inscription: vendredi 23 mai 2003
Statut: Membre
Dernière intervention: 8 avril 2009

29 juin 2006 à 17:44

Le problème existe aussi avec 12,99+11; la seule solution que j'ai trouvée est d'arrondir, mais cela ne résoud pas tous les problèmes. Qui résoudra ce casse tête ?
LGH

Afficher les 9 commentaires

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.

Calculatrice simple

Description

Source / Exemple :

Conclusion :

Codes Sources

A voir également

Vous n'êtes pas encore membre ?

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

Du même auteur (nexan44)

Image qui change au survol de la souris

Source / Exemple :

Conclusion :

A voir également

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Du même auteur (nexan44)

Image qui change au survol de la souris

Vous n'êtes pas encore membre ?

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