Logo
Inscription
Connexion
Générateurs
Bannières animées
Images gifs à effet gratuit
Boutons images html
Titres Web 2.0
Badges Web 2.0
Signatures pour forums
Images perso pour forums (avatar)
Effets et filtres sur image
Cartes Google Maps
Ribbons (Bandeaux) web 2.0
Boutons de partage bookmark
Plus
Plus de générateurs
Référencement
Top liste/site
PageRank Google
Ce que voient les moteurs de recherche
Extracteur de liens
Entêtes HTTP
Balises meta tags
Flash
Lecteur de vidéos flv, mov... en flash
Menu flash Web 2.0
Lecteur de musique MP3 en flash
Boutons flash
Horloges Flash analogique et numetiques
Code flash
Services
Livre d'or
News (Nouvelles)
Tchat Ajax
Sondages
Module de commentaires
Votes (Module de notation)
Compteurs
Compteur Global gratuit sans inscription
Compteur de visiteurs sans inscription
Compteur de visites sans inscription
Compteur de pages vues sans inscription
Compteur de clics
Compteur de connectés (Live)
Tout les scripts et tutoriaux
Tout les Kits graphiques/Designs
Vous êtes ici: Support du web > Scripts et tutoriaux > Javascript > Calculatrice en javascript avec bouttons

Calculatrice en javascript avec bouttons

Mon avatar
ybouane
Calculatrice en javascript avec bouttons Calculatrice en javascript avec bouttons
Note : 4.5/5 (1 vote)
Derniéres modifications : 10/08/2010 à 01:19:51
Mots-Clés : calculatrice javascript code calculatrice graphique bouttons javascript division addition multiplication modulo division virgule backspace egale plus moin calculer js
Bonjour,

Ce script est une calculatrice utilisant le JavaScript, le (X)html strict 1.1 valide, et le CSS. Cette calculatrice est une calculatrice graphique avec des boutons, et une zone pour afficher le résultat, cette calculatrice offres plusieurs options.

En voici un aperçu:

Elle peut faire les opérations suivantes :
  • Le modulo (%)
  • Les additions(+)
  • Les soustractions (-)
  • Les multiplications (x)
  • Les divisions (/)

Voici d'autres caractéristiques de la calculatrice:
  • Conversion d'un nombre positif à négatif (l'inverse aussi)
  • Prise en charge des chiffres à virgule
  • Possibilité de réinitialiser (CE)
  • La calculatrice supporte les touches du clavier


Son fonctionnement est simple, elle a d'abord une fonction qui l'initialise lors du chargement du code (X)html et lors du clic sur le bouton CE.

Elle a deux autres fonctions, la première permet d'ajouter les chiffres lors du clic sur les boutons.

Et la deuxième effectue toutes les opérations.

Et finalement, la calculatrice dispose d'une fonction lui permettant de détecter les frappes du clavier et les exécuter(Cette fonction a d'ailleurs été programmée par jmangelini).

Voici le code :
calculatrice.js
Code: JavaScript
calc_array = new Array();
var calcul=0;
var pas_ch=0;
function $id(id)
{
        return document.getElementById(id);
}
function f_calc(id,n)
{
        if(n=='ce')
        {
                initialiser_calc(id);
        }
        else if(n=='=')
        {
                if(calc_array[id][0]!='=' && calc_array[id][1]!=1)
                {
                        eval('calcul='+calc_array[id][2]+calc_array[id][0]+calc_array[id][3]+';');
                        calc_array[id][0] = '=';
                        $id(id+'_resultat').value=calcul;
                        calc_array[id][2]=calcul;
                        calc_array[id][3]=0;
                }
        }
        else if(n=='+-')
        {
                $id(id+'_resultat').value=$id(id+'_resultat').value*(-1);
                if(calc_array[id][0]=='=')
                {
                        calc_array[id][2] = $id(id+'_resultat').value;
                        calc_array[id][3] = 0;
                }
                else
                {
                        calc_array[id][3] = $id(id+'_resultat').value;
                }
                pas_ch = 1;
        }
        else if(n=='nbs')
        {
                if($id(id+'_resultat').value<10 && $id(id+'_resultat').value>-10)
                {
                        $id(id+'_resultat').value=0;
                }
                else
                {
                        $id(id+'_resultat').value=$id(id+'_resultat').value.slice(0,$id(id+'_resultat').value.length-1);
                }
                if(calc_array[id][0]=='=')
                {
                        calc_array[id][2] = $id(id+'_resultat').value;
                        calc_array[id][3] = 0;
                }
                else
                {
                        calc_array[id][3] = $id(id+'_resultat').value;
                }
        }
        else
        {
                        if(calc_array[id][0]!='=' && calc_array[id][1]!=1)
                        {
                                eval('calcul='+calc_array[id][2]+calc_array[id][0]+calc_array[id][3]+';');
                                $id(id+'_resultat').value=calcul;
                                calc_array[id][2]=calcul;
                                calc_array[id][3]=0;
                        }
                        calc_array[id][0] = n;
        }
        if(pas_ch==0)
        {
                calc_array[id][1] = 1;
        }
        else
        {
                pas_ch=0;
        }
        document.getElementById(id+'_resultat').focus();
        return true;
}
function add_calc(id,n)
{
        if(calc_array[id][1]==1)
        {
                $id(id+'_resultat').value=n;
        }
        else
        {
                $id(id+'_resultat').value+=n;
        }
        if(calc_array[id][0]=='=')
        {
                calc_array[id][2] = $id(id+'_resultat').value;
                calc_array[id][3] = 0;
        }
        else
        {
                calc_array[id][3] = $id(id+'_resultat').value;
        }
        calc_array[id][1] = 0;
        document.getElementById(id+'_resultat').focus();
        return true;
}
function initialiser_calc(id)
{
        $id(id+'_resultat').value=0;
        calc_array[id] = new Array('=',1,'0','0',0);
        document.getElementById(id+'_resultat').focus();
        return true;
}
function key_detect_calc(id,evt)
{
        if((evt.keyCode>95) && (evt.keyCode<106))
        {
                var nbr = evt.keyCode-96;
                add_calc(id,nbr);
        }
        else if((evt.keyCode>47) && (evt.keyCode<58))
        {
                var nbr = evt.keyCode-48;
                add_calc(id,nbr);
        }
        else if(evt.keyCode==107)
        {
                f_calc(id,'+');
        }
        else if(evt.keyCode==109)
        {
                f_calc(id,'-');
        }
        else if(evt.keyCode==106)
        {
                f_calc(id,'*');
        }
        else if(evt.keyCode==111)
        {
                f_calc(id,'/');
        }
        else if(evt.keyCode==110)
        {
                add_calc(id,'.');
        }
        else if(evt.keyCode==190)
        {
                add_calc(id,'.');
        }
        else if(evt.keyCode==188)
        {
                add_calc(id,'.');
        }
        else if(evt.keyCode==13)
        {
                f_calc(id,'=');
        }
        else if(evt.keyCode==46)
        {
                f_calc(id,'ce');
        }
        else if(evt.keyCode==8)
        {
                f_calc(id,'nbs');
        }
        else if(evt.keyCode==27)
        {
                f_calc(id,'ce');
        }
        return true;
}

calculatrice.css
Code: CSS
.calculatrice
{
        width:300px;
        height:300px;
        background-color:#eeeeee;
        border:2px solid #CCCCCC;
        margin:auto;
        padding-left:5px;
        padding-bottom:5px;
}
.calculatrice td
{
        height:16.66%;
}
.calc_td_resultat
{
        text-align:center;
}
.calc_resultat
{
        width:90%;
        text-align:right;
}
.calc_td_calculs
{
        text-align:center;
}
.calc_calculs
{
        width:90%;
        text-align:left;
}
.calc_td_btn
{
        width:25%;
        height:100%;
}
.calc_btn
{
        width:90%;
        height:90%;
        font-size:20px;
}
 

calculatrice.html
Code: (X)html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Calculatrice en javascript</title>
        <script type="text/javascript" src="calculatrice.js"></script>
        <link rel="stylesheet" media="screen, print, handheld" type="text/css" href="calculatrice.css" />
    </head>
    <body>
        <table class="calculatrice" id="calc">
            <tr>
                <td colspan="4" class="calc_td_resultat">
                    <input type="text" readonly="readonly" name="calc_resultat" id="calc_resultat" class="calc_resultat" onkeydown="javascript:key_detect_calc('calc',event);" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="CE" onclick="javascript:f_calc('calc','ce');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="&larr;" onclick="javascript:f_calc('calc','nbs');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="%" onclick="javascript:f_calc('calc','%');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="+" onclick="javascript:f_calc('calc','+');" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="7" onclick="javascript:add_calc('calc',7);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="8" onclick="javascript:add_calc('calc',8);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="9" onclick="javascript:add_calc('calc',9);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="-" onclick="javascript:f_calc('calc','-');" />
                </td>
            </tr>
                        <tr>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="4" onclick="javascript:add_calc('calc',4);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="5" onclick="javascript:add_calc('calc',5);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="6" onclick="javascript:add_calc('calc',6);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="x" onclick="javascript:f_calc('calc','*');" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="1" onclick="javascript:add_calc('calc',1);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="2" onclick="javascript:add_calc('calc',2);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="3" onclick="javascript:add_calc('calc',3);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="&divide;" onclick="javascript:f_calc('calc','/');" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="0" onclick="javascript:add_calc('calc',0);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="&plusmn;" onclick="javascript:f_calc('calc','+-');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="," onclick="javascript:add_calc('calc','.');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="=" onclick="javascript:f_calc('calc','=');" />
                </td>
            </tr>
        </table>
        <script type="text/javascript">
                document.getElementById('calc').onload=initialiser_calc('calc');
        </script>
    </body>
</html>
 
Essayer

C'est tout! J'espère qu'elle vous seras utile!

Je voudrais remercier jmangelini pour avoir programmé le support des touche du clavier.:D
Pour toutes question ou remarque, contactez moi par MP ou utilisez le forum.
Merci

Scripts et tutoriaux similaires à celui ci:

Commentaires

Ajouter un commentaire





Vous n'êtes actuellement pas connecté, certaines de vos informations(tel que votre Adresse IP) seront enregistrées pour éviter du spam.
Votre message ne doit pas contenir certains mots ou une adresse internet, sinon, il ne sera pas envoyé.

Les commentaires

Envoyé par ghouma le 28/06/2009 à 13:59:39
salut, merci
comment faire pour intergrer ses code dans "macromedia flash player 8 profisional"
Envoyé par Augure le 06/08/2009 à 15:20:41
Bonjour,

Cette calculatrice est-elle libre de droit? ou sous licence libre?

Merci


Augure
Envoyé par karaoerd le 08/08/2009 à 11:30:47
ca marche pas en html
Envoyé par ybouane le 09/08/2009 à 00:33:15
Bonjour,

Vous pouvez mettre cette calculatrice sur vos sites sans citer le supportduweb.com
Par contre, vous ne pouvez pas redistribuer le code, vous pouvez simplement mettre un liens vers ce site.

Merci :)
Envoyé par Ad00500 le 10/08/2009 à 13:06:55
Bonjour, peut-on réduire la taille de cette calculatrice ?

Merci d'avance de la réponse.
Envoyé par ybouane le 28/08/2009 à 21:58:57
je t'ai répondu ici:
http://www.supportduweb.com/post-15-aide-calculatrice.html
Envoyé par chantal26 le 07/09/2009 à 18:05:39
Bonjour

Votre calculatrice est superbe et je viens de la tester. La touche / ne fonctionne pas.
Si je tape 45 /5, le diviseur s'ajoute au nombre tapé et j'obtiens : 455 !
Comme je suis ultra débutante en Javascript, j'ai cherché le script de la division et je ne l'ai pas trouvé pour corriger.
Idem pour la touche modulo %

Merci pour votre réponse.
Envoyé par Augure le 08/09/2009 à 11:14:14
je viens de repérer le même bug que Chantal26
Envoyé par Augure le 08/09/2009 à 11:27:55
Bonjour,

La touche "/" n'est pas détecter ni chez moi ni dans la calculatrice en ligne
l'opération 10/2 me donne le résultat 102. Pourtant celui fournit par la calculatrice en ligne est correct.

J'ai comparé le code donné ici et le mien et il sont identique.
Une Idée?
Envoyé par Augure le 08/09/2009 à 11:33:52
Je viens de trouver l'erreur du problème de division :

dans le code HTML, il faut modifier la ligne
<input type="button" class="calc_btn" value="&divide;" onclick="javascript:f_calc('calc','');" />
par
<input type="button" class="calc_btn" value="&divide;" onclick="javascript:f_calc('calc','/');" />

il faut rajouter "/" dans la l'appel de la fonction f_calc('calc','/' );

Par contre la touche / n'est toujours pas détecter. Quel est son keyCode?
Envoyé par ybouane le 31/10/2009 à 04:52:22
Bonjour,
c'est réglé, le nouveau code fonctionne.

Merci :)
Envoyé par De passage le 23/11/2009 à 16:39:05
Bonjour, c'est pour l'instant la calculatrice qui a le plus retenu mon attention cependant, il y a un GROS PROBLEME. Avez-vous regardé le résultat pour 0.3*3, 0.3*6, 0.3*9 ? bref avec tous les multiples de 3... Merci pour ce beau travail. Il reste encore une petite amélioration pour qu'il soit parfait. A suivre.

Y.
Envoyé par ybouane le 28/11/2009 à 21:41:45
Oui, effectivement,
je crois que tu a raison, mais après plusieurs testes, j'ai compris que le problème viens du navigateur, (Pour moi, c'est Firefox 3.5.5). Mais le problème, c'est que le problème est existant dans tout les navigateurs, c'est donc un problème dans la structure du langage javascript(c'est juste une théorie).
Donc on ne peut rien faire pour l'instant.

Merci, et désolé.
Envoyé par Blink186 le 28/04/2010 à 03:24:06
Bonjour,

Merci beaucoup pour ces scripts, ils sont très intéressant.

Par contre, je débute dans ce langage et j'aimerais savoir comment faire pour que cette calculatrice ne s'affiche que lorsque l'on clique sur un bouton, comme pour la saisie de mots de passe chiffré dans certains sites ?

J'utiliserais ces scripts pour une application destinée à des tablettes et je dois donc minimiser la saisie clavier.

Un grand merci si je pouvais avoir une réponse.
Envoyé par UNAL le 05/07/2010 à 10:20:54
Merci les gars je vien d'avoir mon script pour le test
Envoyé par eliastik59 le 20/12/2010 à 14:56:09
Quand je met 6 + 6 , sa me met en résultat : 1
Envoyé par ghis le 27/03/2011 à 11:20:20
dommage qu'il n'y ait pas de commentaires.. pour comprendre le script de quelqu'un d'autre, c'est tout de même plus facile....
Envoyé par Alain le 01/04/2011 à 20:50:41
Pour commencer, je tiens à remercier l'auteur du script, j'ai mis cette calculatrice pendant une année sur un site Internet (maintenant je l'ai remplacée par un de mes scripts). J'ai cependant trouvé un confis avec plusieurs navigateurs, si on appuie sur la touche retour, cela renvoi sur la page précédente, dans le fichier calculatrice.js

else if(evt.keyCode==8)
{
f_calc(id,'nbs');
}

ne sert donc plus à rien vu que la page et quittée. J'ai malheureusement pas trouvé comment résoudre le problème notamment sur IE. Peut être quelqu'un aura trouvé une solution.

Il y'a aussi un petit "bug" avec la fonction % si l'ont fait par exemple 125-10 %, le résultat et 115 au lieu de 112.50.

Merci,

Alain
Envoyé par aaaa le 10/05/2011 à 12:51:55
merci pour tout les ami
Envoyé par myriam le 06/12/2011 à 14:16:11
ou son les x, comprend pas
Envoyé par forgiven le 27/12/2011 à 18:50:36
c'est bien !!!!
Envoyé par wgimtpux le 24/01/2012 à 12:30:03
20
Envoyé par gauthier1997 le 29/09/2012 à 11:03:05
ca ne marche pas et cest tres enervant
Envoyé par zakaria le 25/11/2012 à 11:56:38
Salut,
je voudrais faire la meme chose mais cette fois avec des images au lieu des input boutons, le probleme c'est que je ne sais pas comment faire pour afficher un numéro sur l'ecran en cliquant sur une image(1,2,3,4,5,6,7,8,9,+,-,/,=,...etc).
Si quelqu'un pouvait me venir en l'aide ce serait génial.
Merci d'avance
Envoyé par gCziEmaM le 13/12/2012 à 08:21:02
Прикольно. Но все-же. Есть один небольшой минус. Как я понял(и проверил), числа не генерируются автоматически. А значит,какой-нибудь умник скажет спам-боту этот код, и он будет вводить его. Тоесть, лучше уже использовать старый добрый rand () и imagecreate () для создания капчи.P.S: Как я понял, если открыта форма комментариев, комментировать статьи можно.
Envoyé par JWVbtVnvdJFUec le 15/12/2012 à 13:15:23
Check that off the list of thnigs I was confused about.
Envoyé par Mohamed le 09/01/2013 à 04:49:16
Merci Beaucoup, trooo jolie
Envoyé par Dév Inf le 14/01/2013 à 21:23:44
Merci frero
Envoyé par fffgbvv le 04/04/2013 à 22:54:31
sa work pas
Envoyé par X:p le 17/05/2013 à 20:31:07
faudrait soigner le fait qu'on peut avoir pluus d'une virgule dans un chiffre :)


Il y a actuellent 32 personne(s) connecté(es)
Page générée en 0.006055 secondes
Retour en haut
Règlements - Nous contacter - Aider le site - RSS News
Copyright © Support du web - Toute copie partielle ou complète de nos créations est interdite sans l'accord de ses auteurs.
Toutes les marques citées appartiennent à leurs compagnies respectives.