Based on HTML + CSS, the simple calculator compiled by jQuery (added a keyboard listener) and cssjquery

Based on HTML + CSS, the simple calculator compiled by jQuery (added a keyboard listener) and cssjquery

I have released a simple calculator. Today I made some modifications and added a keyboard listening event. You don't need to use the mouse to point it.

JS Code:

Var yunSuan = 0; // operator number, 0-no operation; 1-addition; 2-subtraction; 3-multiplication; 4-division var change = 0; // After the operator is used, you need to clear the previous value var num1 = 0; // calculate the first data var num2 = 0; // calculate the second data var cunChuValue = 0; // The stored value $ (function () {$ (". number "). click (function () {// click a number to trigger the event var num = $ (this ). attr ('name'); var oldValue = $ ("# jieguo" ).html (); if (change = 1) {oldValue = "0"; change = 0 ;} var newValue = ""; if (num =-1) {oldValue = parseFloat (oldValue); newValue = ol DValue *-1;} else if (num = ". ") {if (oldValue. indexOf ('. ') =-1) newValue = oldValue + ". "; elsenewValue = oldValue;} else {if (oldValue = 0 & oldValue. indexOf ('. ') =-1) {newValue = num;} else {newValue = oldValue + num ;}$ ("# jieguo" ).html (newValue );}); $ ("# qingPing "). click (function () {// click the clear screen trigger event $ ("# jieguo" ).html ("0"); yunSuan = 0; change = 0; num1 = 0; num2 = 0 ;}); $ ("# tuiGe "). click (function (){ // Click the backspace trigger event if (change = 1) {yunSuan = 0; change = 0;} var value = $ ("# jieguo" ).html (); if (value. length = 1) {$ ("# jieguo" ).html ("0");} else {value = value. substr (0, value. length-1); $ ("# jieguo" ).html (value) ;}}); $ (". yunSuan "). click (function () {// click the operator number to trigger the event change = 1; yuSuan = $ (this ). attr ('name'); var value = $ ("# jieguo" ).html (); var dianIndex = value. indexOf (". "); if (dianIndex = value. length) {valu E = value. substr (0, value. length-1);} num1 = parseFloat (value);}); $ ("# dengYu "). click (function () {// click the event var value = $ ("# jieguo" ).html (); var dianIndex = value. indexOf (". "); if (dianIndex = value. length) {value = value. substr (0, value. length-1);} num2 = parseFloat (value); var sum = 0; if (yuSuan = 1) {sum = num1 + num2 ;} else if (yuSuan = 2) {sum = num1-num2;} else if (yuSuan = 3) {sum = Num1 * num2;} else if (yuSuan = 4) {sum = num1/num2 ;} else if (yuSuan = 0 | num1 = 0 | num2 = 0) {sum = num1 + num2 ;} var re =/^ [0-9] + .? [0-9] * $/; if (re. test (sum) {sum = sum. toFixed (2) ;}$ ("# jieguo" ).html (sum); change = 1; yuSuan = 0; num1 = 0; num2 = 0 ;}); $ ("# cunChu "). click (function () {// click storage trigger event change = 1; var value = $ ("# jieguo" ).html (); var dianIndex = value. indexOf (". "); if (dianIndex = value. length) {value = value. substr (0, value. length-1) ;}cunchuvalue = parseFloat (value) ;}); $ ("# quCun "). click (function () {// click Save trigger event change = 1; $ (" # Jieguo "pai.html (cunChuValue) ;}); $ (" # qingCun "). click (function () {// click the clear storage trigger event change = 1; cunChuValue = 0 ;}); $ ("# leiCun "). click (function () {// click the trigger event change = 1; var value = $ ("# jieguo" ).html (); var dianIndex = value. indexOf (". "); if (dianIndex = value. length) {value = value. substr (0, value. length-1);} cunChuValue + = parseFloat (value) ;}); $ ("# jiCun "). click (function () {// click the deposit trigger event change = 1; var value = $ ("# Jieguo" pai.html (); var dianIndex = value. indexOf (". "); if (dianIndex = value. length) {value = value. substr (0, value. length-1);} if (cunChuValue = 0) {cunChuValue = parseFloat (value);} else {cunChuValue = cunChuValue * parseFloat (value );}});}); // click to listen for $ (document ). keydown (function (event) {// number listening if (event. keyCode> 47 & event. keyCode <58) | (event. keyCode> 95 & event. keyCode <106) | (event. KeyCode = 190 | event. keyCode = 110 ))&&! Event. shiftKey) {keyDownNum (event. keyCode);} // "+" Listen to if (event. keyCode = 187 & event. shiftKey) | event. keyCode = 107) {keyDownYuSuan (1);} // "-" Listen if (event. keyCode = 189 & event. shiftKey) | event. keyCode = 109) {keyDownYuSuan (2);} // "*" listen if (event. keyCode = 56 & event. shiftKey) | event. keyCode = 106) {keyDownYuSuan (3);} // "/" listen if (event. keyCode = 191 | event. keyCode == 111) {keyDownYuSu An (4);} // "=" Listen to if (event. keyCode = 187 &&! Event. shiftKey) | event. keyCode = 13) {$ ("# dengYu "). click ();} // "rollback" listens to if (event. keyCode = 8) {$ ("# tuiGe "). click (); return false;} // "clear screen" listens to if (event. keyCode = 27 | event. keyCode = 46 | (event. keyCode = 110 & event. shiftKey) {$ ("# qingPing "). click (); return false;} // "Storage" listens to if (event. keyCode = 112) {$ ("# cunChu "). click (); return false;} // "save" listens to if (event. keyCode = 113) {$ ("# quCun "). click (); return false;} // "tired memory" listens to if (event. keyCode = 114) {$ ("# leiCun "). click (); return false;} // "deposit" listens to if (event. keyCode = 115) {$ ("# jiCun "). click (); return false;} // "clear memory" listens to if (event. keyCode = 117) {$ ("# qingCun "). click (); return false ;}}); /*** key trigger operator value 1-'+ '2-'-'3-'* '4-'/'*/function keyDownYuSuan (value) {change = 1; yuSuan = value; var value = $ ("# jieguo" ).html (); var dianIndex = value. indexOf (". "); if (dianIndex = value. length) {value = value. substr (0, value. length-1);} num1 = parseFloat (value);}/*** press the key to trigger the digital code ASCLL code */function keyDownNum (code) {var number = 0; if (code = 48 | code = 96) {// "0" listener number = 0;} if (code = 49 | code = 97) {// "1" listening number = 1;} if (code = 50 | code = 98) {// "2" listening number = 2 ;} if (code = 51 | code = 99) {// "3" listener number = 3;} if (code = 52 | code = 100) {// "4" listening number = 4;} if (code = 53 | code = 101) {// "5" listening number = 5 ;} if (code = 54 | code = 102) {// "6" listener number = 6;} if (code = 55 | code = 103) {// "7" listener number = 7;} if (code = 56 | code = 104) {// "8" listener number = 8 ;} if (code = 57 | code = 105) {// "9" listener number = 9;} if (code = 190 | code = 110) {//". "listener number = ". ";}var num = number; var oldValue = $ (" # jieguo ").html (); if (change = 1) {oldValue =" 0 "; change = 0 ;} var newValue = ""; if (num =-1) {oldValue = parseFloat (oldValue); newValue = oldValue *-1;} else if (num = ". ") {if (oldValue. indexOf ('. ') =-1) newValue = oldValue + ". "; elsenewValue = oldValue;} else {if (oldValue = 0 & oldValue. indexOf ('. ') =-1) {newValue = num;} else {newValue = oldValue + num ;}$ ("# jieguo" ).html (newValue );}

HTML/CSS code:

<% @ Page language = "java" contentType = "text/html; charset = UTF-" pageEncoding = "UTF-" %> <! DOCTYPE html> 
The style layout of the calculator draws lessons from others, but the code is all written by myself. Due to time reasons, you have not had time to test it. You are welcome to raise any bugs during use and learn and make progress together, thank you.
Articles you may be interested in:

 

 
  
A simple jQuery calculator provides continuous computing.