Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Kalkulator w JS
Forum PHP.pl > Inne > Oceny
sebekzosw
2.10.2011, 16:02:04
Proszę o ocenę kalkulatora w JS smile.gif

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <head>
  5. 	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  6. 	<title>Kalkulator</title>
  7.     <style type="text/css">
  8.         form
  9.         {
  10.             width: 227px;
  11.             height: 321px;
  12.             border: 1px solid #000;
  13.             text-align: center;
  14.         }
  15.  
  16.         input[type=text]
  17.         {
  18.             margin-top: 10px;
  19.             padding-top: 20px;
  20.             width: 189px;
  21.             height: 29px;
  22.             text-align: right;        
  23.         }
  24.  
  25.         input[type=button]
  26.         {
  27.             width: 56px;
  28.             height: 40px;
  29.             text-align: center;
  30.         }
  31.     </style>
  32.     <script type="text/javascript" src="kalkulator.js"></script>
  33. </head>
  34.  
  35. <body>
  36.  
  37. <form action="" method="post">
  38.     <div>
  39.          <input id="phrase" type="text" disabled="disabled" value="" />
  40.     </div>
  41.  
  42.     <div>
  43.         <input type="button" onclick="delString(); return false;" name="delStringA" value="&lt;-" />
  44.         <input type="button" onclick="reset(); return false;" name="resetAll" value="C" />
  45.         <input type="button" onclick="result(); return false;" name="mathResult" value="=" />
  46.     </div>   
  47.  
  48.     <div>
  49.         <input type="button" name="action" value="7" />
  50.         <input type="button" name="action" value="8" />
  51.         <input type="button" name="action" value="9" />
  52.     </div>    
  53.  
  54.     <div>
  55.         <input type="button" name="action" value="4" />
  56.         <input type="button" name="action" value="5" />
  57.         <input type="button" name="action" value="6" />
  58.     </div>
  59.  
  60.     <div>
  61.         <input type="button" name="action" value="1" />
  62.         <input type="button" name="action" value="2" />
  63.         <input type="button" name="action" value="3" />
  64.     </div>
  65.  
  66.     <div>
  67.         <input type="button" name="action" value="0" />
  68.         <input type="button" name="action" value="+" />
  69.         <input type="button" name="action" value="-" />
  70.     </div>
  71.  
  72.     <div>
  73.         <input type="button" name="action" value="/" />
  74.         <input type="button" name="action" value="*" />
  75.         <input type="button" name="action" value="." />
  76.     </div>
  77. </form>
  78.  
  79. </body>
  80. </html>
[HTML] pobierz, plaintext 


[JAVASCRIPT] pobierz, plaintext 
  1. //definujemy tablice znaków
  2. var keys = new Array();
  3. keys[96] = 0;
  4. keys[97] = 1;
  5. keys[98] = 2;
  6. keys[99] = 3;
  7. keys[100] = 4;
  8. keys[101] = 5;
  9. keys[102] = 6;
  10. keys[103] = 7;
  11. keys[104] = 8;
  12. keys[105] = 9;
  13. keys[106] = '*';
  14. keys[107] = '+';
  15. keys[109] = '-';
  16. keys[110] = '.';
  17. keys[111] = '/';
  18.  
  19. document.onkeydown = checkKeycode;
  20.  
  21. window.onload = function()
  22. {
  23.     inputs = document.getElementsByTagName('input');
  24.     for(i=0; i<inputs.length; i++)
  25.     {
  26.         if(inputs[i].getAttribute("name") != null && inputs[i].getAttribute("name") == "action")
  27.         {
  28.             inputs[i].onclick = function ()
  29.             {
  30.                 addAction(this.value);
  31.             }
  32.         }
  33.     }
  34. }
  35.  
  36. function $(id)
  37. {
  38.     return document.getElementById(id);
  39. }
  40.  
  41. function inArray(needle, haystack)
  42. {
  43.     var length = haystack.length;
  44.     for(var i = 0; i < length; i++)
  45.     {
  46.         if(haystack[i] == needle)
  47.             return true;
  48.     }
  49.  
  50.     return false;
  51. }
  52.  
  53. function checkKeycode(e)
  54. {
  55.     var keycode;
  56.  
  57.     if (window.event) 
  58.         keycode = window.event.keyCode;
  59.     else if (e)
  60.         keycode = e.which;
  61.  
  62.     if(keycode == 8) //jeżeli kasujemy ostatni znak Backspace
  63.         delString();
  64.     else if(keycode == 13) //jeżeli klikamy enter w celu sprawdzeniu wyniku
  65.         result();
  66.     else if((keycode >= 96) && (keycode <= 114))
  67.     {
  68.         if(typeof keys[keycode] != "undefined")
  69.             addAction(keys[keycode]);
  70.     }
  71. }
  72.  
  73. //wykonywanie działań
  74. function result()
  75. {
  76.     $ob = $('phrase');
  77.  
  78.     if($ob.value.length > 0)
  79.     {
  80.         $result = eval($ob.value);
  81.         if(Math.abs($result) == Infinity)
  82.             $result = "Nie można dzielić przez 0";
  83.  
  84.         $ob.value = $result;
  85.     }
  86.     else
  87.         alert('Podaj jakieś dane!');
  88. }
  89.  
  90. //funkcja dopisująca do pola działanie
  91. function addAction(ob)
  92. {
  93.     if($('phrase').value.match(/przez.*?/) != null)
  94.         $('phrase').value = '';
  95.  
  96.     $how = $('phrase').value.length;
  97.     if($how > 0)
  98.     {
  99.         $last = $('phrase').value.substr($how-1,$how); //sprawdzamy ostatnio wprowadzony znak
  100.  
  101.         /*
  102.             sprawdzamy, czy nowy znak do prowadzenia nie jest identyczny do przedostatniego
  103.             
  104.             nie możemy dodać np ** ale możemy dodać np 55 więc należy też sprawdzić czy nowy obiekt jest liczbą, a nie znakiem
  105.         */
  106.         if((ob == $last) && isNaN(ob))
  107.             ob = '';
  108.     }
  109.  
  110.     $('phrase').value += ob;   
  111. }
  112.  
  113. //funkcja usuwająca ostatni znak
  114. function delString()
  115. {
  116.     $how = $('phrase').value.length;
  117.     if($how > 0)
  118.         $('phrase').value = $('phrase').value.substr(0,$how-1);
  119. }
  120.  
  121. //funkcja resetująca pole z wynikiem
  122. function reset()
  123. {
  124.     $('phrase').value = '';
  125. }
[JAVASCRIPT] pobierz, plaintext
Fifi209
2.10.2011, 16:16:03
Wrzuć na jakiś hosting, bo nie będzie sobie każdy tego sklejał żeby ocenić.
sebekzosw
2.10.2011, 16:26:31
http://spisula.pl/calc/kalkulator.htm
ShadowD
2.10.2011, 19:11:51
76675567*/+8 nie da się policzyć. Masa niedociągnięć a to było jedno z nich, nie da się zaznaczyć wyniku itd.

W jakim celu takie urzeczenie? :-) Szczerze to wolę w google wpisać 2*99^3=
skowron-line
2.10.2011, 21:03:06
To co kolega nade mną + brak możliwości wpisania liczb z klawiatury. Ogólnie bez rewelacji.
sebekzosw
2.10.2011, 21:07:45
miałem coś takiego jak zajęcia specjalizacyjne i zrobiłem kalkulator, który liczy.

możliwość wpisywania danych z klawiatury jest...
Fifi209
2.10.2011, 21:16:56
ale tylko na numerycznej, chyba o to im chodziło
markonix
2.10.2011, 21:41:15
Esc - powinien resetować.

5+5+5 = 155 ?
(pokazało mi kilka razy, nie wiem czemu - tzn. nie umiem odtworzyć kolejności).

Enter mi resetuje wartość, a czasami działa poprawnie.
Ważniejsze przyciski bym zrobił większe (jak na klawiaturze NUM).
nospor
3.10.2011, 08:38:34
8*5 enter
wynik:405
Coś masz nie tak z tym enterem bo problem identyczny jak post wyżej

w komentarzu masz coś takiego:
Cytat
nie możemy dodać np ** ale możemy dodać np 55 więc należy też sprawdzić czy nowy obiekt jest liczbą, a nie znakiem

No i dobra, ** nie mogę dać, ale już *-+ i owszem.
Mogę również jako pierwszy znak dać * lub każdy inny operator
sebekzosw
3.10.2011, 17:12:16
poprawki wprowadzone - http://spisula.pl/calc/kalkulator.htm
markonix
3.10.2011, 23:53:06
Kod
50+50
1008...

Znowu nie umiem odtworzyć sytuacji bo po odświeżeniu jest już ok.

Sugestia: Jeżeli na końcu umieszczam znak i się mylę to fajnie jakby znak był nadpisywany (patrz. Windowsowy Kalkulator)

Nie działa mi C.

Nie wiem, może akurat teraz coś tam skrobiesz i dlatego.
kilas88
4.10.2011, 01:30:46
To co rzuciło mi się od razu w oko:
- nie dałeś żadnej przestrzeni znakowej, a dodatku używasz popularnych nazw funkcji, jak $
- zamiast == używaj ===
- zamiast składni if (inputs[i].getAttribute("name") != null && inputs[i].getAttribute("name") == "action") {} już lepiej dać if (inputs[i].hasAttribute("name") && inputs[i].getAttribute("name") == "action") {}
skowron-line
4.10.2011, 08:45:08
http://imageshack.us/f/9/kalkulator.png/ smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.