| Vous êtes ici: Support du web > Scripts et tutoriaux > Javascript > Calculatrice en javascript avec bouttons |
Calculatrice en javascript avec bouttons |
|---|
|
Calculatrice en javascript avec bouttons
Note : 4/5 (0 vote) Derniéres modifications : 13/12/2008 à 00:50: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 :
Voici d'autres caractéristiques de la calculatrice:
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. 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; } 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; return true; } function initialiser_calc(id) { $id(id+'_resultat').value=0; calc_array[id] = new Array('=',1,'0','0',0); } 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" /> </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="←" 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="÷" 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="±" 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> C'est tout! J'espère qu'elle vous seras utile! Pour toutes question ou remarque, contactez moi par MP ou utilisez le forum. Merci CommentairesAjouter un commentaireLes commentairesIl n'y a actuellement aucun commentaire pour ce tutoriel |