Une calculatrice en javascript. Elle permet de faire les opérations suivantes : addition, soustraction, multiplication, division, pourcentage. Vous pouvez télécharger le code source en bas de cette page (tout est dans zip).

Le code comprend 3 fichiers :
1 fichier "calculatrice.js"
1 fichier "calculatrice.css"
1 fichier "calculatrice.html"

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
{
        width:400px;
height:400px;
        background-color:#DB6893;
        border:2px solid #CCCCCC;
        margin:auto;
        padding-left:5px;
        padding-bottom:5px;
		border-top: 4px solid #CCCCCC;
		border-bottom: 4px solid #CCCCCC;
		border-left: 4px solid  #6F103D;
		border-right: 4px solid  #6F103D;
		
		border: 4mm ridge rgba(111, 16, 61, .6);
}
.calculatrice td
{
        height:16.66%;
}
.calc_td_resultat
{
        text-align:center;
}
.calc_resultat
{ background-color : #D5E1E1;
        width:90%;
        text-align:right;
		 font-size:30px;
}
.calc_td_calculs
{
        text-align:center;
}
.calc_calculs
{
        width:90%;
        text-align:left;
}
.calc_td_btn
{
        width:25%;
        height:100%;
}
.calc_btn
{background-color: #9F1754;
        width:90%;
        height:90%;
        font-size:20px;
		color: #fff;
}

><!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>