This article mainly introduces the relevant information about the simple calculator (added a keyboard listener) Written in HTML + CSS and jQuery, if you need it, you can refer to the previous simple calculator. Today, I made some modifications and added a keyboard listening event, so you don't need to click it again.
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-" %>
Simple Calculator