Rekenmachine

Status
Niet open voor verdere reacties.

JeroenE

Terugkerende gebruiker
Lid geworden
20 mrt 2005
Berichten
1.950
Lang geleden dat ik hier nog eens een vraag stelde, maar hier is er weer eentje :

bv bas bv heeft mij in deze topic op het idee gebracht zelf ook te proberen een javascript rekenmachine te maken.
Deze werkt perfect, maar nu zou ik er graag voor zorgen dat je ook met het numpad kunt werken van het keyboard.
Wat is de code voor het detecteren van welk cijfer of teken dat je ingedrukt hebt?
--> Dit <-- is de rekenmachine.

Greetz : Jer:cool:en.
 
Laatst bewerkt:
Keycodes in Javascript:bijlage



P.S. Weet je dat je 0-toets van je rekenmachine in FF heel erg uitrekt? ;)
 

Bijlagen

Laatst bewerkt:
Dank je wel Killermenace.

Nu zou ik nog graag weten hoe ik die in javascript kan integreren zodat de zichtbare knop op het rekenmachientje ingedrukt wordt (zonder erop te klikken, maar met de knop van het numpad), alsook de verandering in de display.

P.S.: De 0-toets zou nu moeten juist weergegeven worden. Dank je wel voor de tip.;)

Greetz : Jer:cool:en.
 
Hij werkt mooi :thumb:

Alleen grafisch pakt hij em in FF nog steeds niet helemaal goed.

rekenmachine6wv.jpg
 
Dat is eindelijk gelukt om het ook op te lossen, maar nu doet zich een ander probleempje voor, namelijk dat de plusknop te klein is in internet explorer.
SmallCalculatorPlusButton.jpg

Om die in FF de juiste grootte te geven, moet de style op height:100% staan, terwijl dat voor IE height:158px moet zijn.
Zal dus nog even moeten zoeken om ook dat in orde te brengen.

Greetz : Jer:cool:en.
 
Laatst bewerkt:
Ik heb geprobeerd met een onLoad="setProps();", maar nu staat de plusknop in beide browsers vertikaal gecentreerd.
Hier is de code :
PHP:
function setProps() {
if (navigator.appName == "FF") {
document.getElementById("addButton").style.height = "100%";
} else if (navigator.appName == "IE") {
document.getElementById("addButton").style.height = "158px";
};
};

Greetz : Jer:cool:en.
 
Dat is inderdaad mogelijk, maar dan is die knop nog niet de hoogte van twee knoppen.
Ik ga wel eens proberen een verschillende class toe te wijzen voor FF en IE.
Misschien lukt het me zo.

Greetz : Jer:cool:en.
 
Lukt ook niet.
Nu weet ik niet echt nog een oplossing. :(

Greetz : Jer:cool:en.
 
JeroenE zei:
Nu zou ik nog graag weten hoe ik die in javascript kan integreren zodat de zichtbare knop op het rekenmachientje ingedrukt wordt (zonder erop te klikken, maar met de knop van het numpad).
Hier zitten een paar ideetjes in:
HTML:
<html>
 <head>
  <title>Key > Button | Egel 060705 ;)</title>
  <style type="text/css">
   <!--
    input, .ka, .kb, select, option { color: #000; font-size: 10pt; font-family: Ms Sans Serif;}
    .ka, .kb { border: 2px solid #c0c0c0; height: 40px; width: 40px; background: #c0c0c0; cursor: hand; font-family: FixedSys;}
    .ka { border-color: #e0e0e0 #7f7f7f #7f7f7f #e0e0e0; padding: 0px 1px 3px 0px;}
    .kb { border-color: #7f7f7f #e0e0e0 #e0e0e0 #7f7f7f; padding: 1px 0px 2px 1px;}
   // -->
  </style>
  <script language="JavaScript">
   <!--
    function press(id) {
     id.className = 'kb';
     setTimeout("release()",500);
     };
    function release() {
     for (var i = 0; i < document.f.elements.length; i++) {
      if (document.f.elements[i].className == 'kb') document.f.elements[i].className = 'ka';
      };
     };
    function getKey(keyStroke) {
     var keyNr = 0;
     if (typeof(event) == 'object') {
      keyNr = event.keyCode;
      } else if (typeof(keyStroke) == 'object') {
      keyNr = keyStroke.which;
      };
     // alert(keyNr);
     switch(keyNr) {
      case 97: press(document.f.b1); break;
      case 98: press(document.f.b2); break;
      case 99: press(document.f.b3); break;
      case 144: alert('Toets nogmaals NumLock!'); break;
      };
     };
    document.onkeydown = getKey;
   // -->
  </script>
  <body>
   <form name="f">
    <input type="button" class="ka" value="1" name="b1" onclick="" onmouseover="this.className='kb'" onmouseOut="this.className='ka'">
    <input type="button" class="ka" value="2" name="b2" onclick="" onmouseover="this.className='kb'" onmouseOut="this.className='ka'">
    <input type="button" class="ka" value="3" name="b3" onclick="" onmouseover="this.className='kb'" onmouseOut="this.className='ka'">
  </form>
 </body>
</html>
Bijlage. :cool: ;)


Vr.Gr. Egel.

P.s.: http://www.petting-zoo.org/Calculator.html
 

Bijlagen

9 * -9 is naar mijn weten -81 en niet 81 ;) zit dus nog een bugje in :D

Edit: 9*3 is geen 9 ;) en 9*6 ook geen 36..
Zou nog ff goed naar je code kijken, verder werkt het goed :)
 
Laatst bewerkt:
Ik zal me er inderdaad nog even moeten in verdiepen.
Als ik een negatief getal in het memory steek, dan geeft die bij het opvragen ervan het possitieve getal weer.

Strange.:confused:

Greetz : Jer:cool:en.
 
Bugjes zijn eruit door helemaal te herbeginnen en te vereevoudigen. :D
Nu nog juist dat schitterende idee van Egel erin verwerken. ;)

--> Klik <--

Greetz : Jer:cool:en.
 
Klopt. :D
Da's een leuk neveneffect, maar zal da wel nog veranderen.:p

Greetz : Jer:cool:en.
 
Ik heb het indruk en loslaat script nog wat verbeterd:
HTML:
<html>
 <head>
  <title>Key > Button | Egel 060710 ;)</title>
  <style type="text/css">
   <!--
    input, .ka, .kb, select, option { color: #000; font-size: 10pt; font-family: Ms Sans Serif;}
    .ka, .kb { border: 2px solid #c0c0c0; height: 40px; width: 40px; background: #c0c0c0; cursor: hand; font-family: FixedSys; margin: 2px;}
    .ka { border-color: #e0e0e0 #7f7f7f #7f7f7f #e0e0e0; padding: 0px 1px 3px 0px;}
    .kb { border-color: #7f7f7f #e0e0e0 #e0e0e0 #7f7f7f; padding: 1px 0px 2px 1px;}
   // -->
  </style>
  <script language="JavaScript">
   <!--
    function press(id,pr) {
     id.className = (pr ? 'kb' : 'ka');
     };
    function getKey(keyStroke) {
     var keyNr = 0;
     if (typeof(event) == 'object') {
      keyNr = event.keyCode;
      } else if (typeof(keyStroke) == 'object') {
      keyNr = keyStroke.which;
      };
     // alert(keyNr);
     var f = document.f;
     switch(keyNr) {
      case  96: press(f.b0,true); setTimeout('press(f.b0,false)',500); break;
      case  97: press(f.b1,true); setTimeout('press(f.b1,false)',500); break;
      case  98: press(f.b2,true); setTimeout('press(f.b2,false)',500); break;
      case  99: press(f.b3,true); setTimeout('press(f.b3,false)',500); break;
      case 100: press(f.b4,true); setTimeout('press(f.b4,false)',500); break;
      case 101: press(f.b5,true); setTimeout('press(f.b5,false)',500); break;
      case 102: press(f.b6,true); setTimeout('press(f.b6,false)',500); break;
      case 103: press(f.b7,true); setTimeout('press(f.b7,false)',500); break;
      case 104: press(f.b8,true); setTimeout('press(f.b8,false)',500); break;
      case 105: press(f.b9,true); setTimeout('press(f.b9,false)',500); break;
      case 110: press(f.bp,true); setTimeout('press(f.bp,false)',500); break;
      case 144: alert('NumLock moet ingeschakeld zijn!'); break;
      };
     };
    document.onkeydown = getKey;
   // -->
  </script>
  <body>
   <form name="f">
    <input type="button" class="ka" value="7" name="b7" onclick="" onmouseover="this.className='kb'" onmouseOut="this.className='ka'"><input type="button" class="ka" value="8" name="b8" onclick="" onmouseover="this.className='kb'" onmouseOut="this.className='ka'"><input type="button" class="ka" value="9" name="b9" onclick="" onmouseover="this.className='kb'" onmouseOut="this.className='ka'"><br>
    <input type="button" class="ka" value="4" name="b4" onclick="" onmouseover="this.className='kb'" onmouseOut="this.className='ka'"><input type="button" class="ka" value="5" name="b5" onclick="" onmouseover="this.className='kb'" onmouseOut="this.className='ka'"><input type="button" class="ka" value="6" name="b6" onclick="" onmouseover="this.className='kb'" onmouseOut="this.className='ka'"><br>
    <input type="button" class="ka" value="1" name="b1" onclick="" onmouseover="this.className='kb'" onmouseOut="this.className='ka'"><input type="button" class="ka" value="2" name="b2" onclick="" onmouseover="this.className='kb'" onmouseOut="this.className='ka'"><input type="button" class="ka" value="3" name="b3" onclick="" onmouseover="this.className='kb'" onmouseOut="this.className='ka'"><br>
    <input type="button" class="ka" value="0" name="b0" onclick="" onmouseover="this.className='kb'" onmouseOut="this.className='ka'" style="width: 84px;"><input type="button" class="ka" value="." name="bp" onclick="" onmouseover="this.className='kb'" onmouseOut="this.className='ka'"><br>
  </form>
 </body>
</html>
zo werkt het loslaten wat beter. :)


Vr.Gr. Egel.
 

Bijlagen

Doorrekenen gaat ook niet goed.
2×3+4×5=10??? (volgens mij moet het toch echt 26 zijn)

En
2×3=6+4×5=30??

Ik denk dat ik voorlopig mijn salaris er maar niet mee ga uitrekenen.
 
Laatst bewerkt:
Gelijk heb je maestro. :o
Dacht weer eens dat het eenvoudiger ging zijn. :(

Greetz : Jer:cool:en.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan