HTML+CSS+JS Realization Scientific Calculator

The code address is as follows:
Http://www.demodashi.com/demo/13751.html

Project description

Pure HTML+CSS+JS implements a scientific calculator, supports basic functions such as square root exponent logarithm, supports keyboard input, has simple and advanced two modes

File structure

Pure HTML+CSS+JS Implementation, the file structure is very simple, on three files.

Demo effect

Experimental design

1. The value of the button is set to the character displayed by the button, and when the button is clicked, the input box adds the character to the button's value, where the function's button increases the character to the last x where the character precedes it, that is, to the opening parenthesis.

<div id= "Advanced" > <input type= "button" value= "log (x)" title= "E base logarithm" > <input type= "button" Value= "sqrt (x)" title= "Square root of X" > <input type= "button" value= "pow (x, y)" title= "X y Power" > <input type = "button" value= "ABS (x)" title= "x Absolute value" > <input type= "button" value= "Ceil (x)" title= "rounding up" > <inpu        T type= "button" value= "log10 (x)" title= "base 10 logarithm" > <input type= "button" value= "CBRT (x)" title= "x cube root" > <input type= "button" Value= "exp (x)" title= "E x Power" > <input type= "button" value= "Round (x)" title= "Rounding" &        Gt <input type= "button" value= "Floor (x)" title= "rounding Down" > </div> <div id= "simple" > <in Put type= "button" value= "(" > <input type= "button" value= ")" > <input type= "button" value= "%" titl E= "seeking remainder" > <input type= "button" value= "/" title= "Division" > <input type= "button" value= "↑" title= "Previous expression        "><input type= "button" value= "7" > <input type= "button" value= "8" > <input type= "button" value= "9 "> <input type=" button "value=" * "title=" multiplication "> <input type=" button "value=" ← "title=" Delete last character "        ; <input type= "button" value= "4" > <input type= "button" value= "5" > <input type= "button" value= "6 "> <input type=" button "value="-"title=" subtraction "> <input id=" ce "type=" button "value=" ce "title=" clear table Up > <input type= "button" value= "1" > <input type= "button" value= "2" > <input type= "b Utton "value=" 3 "> <input type=" button "value=" + "title=" Add "> <input id=" Calc "type=" button "Valu E= "=" title= "calculation result" > <input id= "zero" type= "button" value= "0" > <input type= "button" value= "XX"        ; <input type= "button" value= "." ></div>

var sPos = exp.selectionStart;var cursorPos = sPos;var s = exp.value;var btn = this.value.substr(0,this.value.lastIndexOf(‘x‘));exp.value = s.substring(0, sPos) + btn + s.substring(sPos, s.length);

1. Support keyboard input, so the input is blocked when entering English and Chinese illegally

// exp 为输入框var len = exp.value.length;var lastch = exp.value[len - 1];while (lastch >= ‘a‘ && lastch <= ‘z‘ || lastch >= ‘A‘ && lastch <= ‘Z‘ || escape(exp.value).indexOf("%u") >= 0) {      exp.value = exp.value.substring(0, len - 1);      len = exp.value.length;      lastch = exp.value[len - 1]; }

1. Evaluation is evaluated using the Eval function, and if the expression contains//or/**/, eval treats it as a comment, so this is handled. The evaluation requires that each function name, such as XXX, be replaced by math.xxx to be recognized by Eval.

var reg = new RegExp("[a-z]{2,}", "g");var res = exp.value.match(reg); //regular expression to find function nameif (exp.value.indexOf("//") >= 0 || exp.value.indexOf("*/") >= 0)    throw "Invalid"; //If use eval, // and /**/ will be comment    if (res != null) {  // replace function name xxx with Math.xxx      res.sort();      while (res.length) {          reg = RegExp(res[0], "g");          exp.value = exp.value.replace(reg, "Math." + res[0]);          res.splice(0, res.lastIndexOf(res[0]) + 1);      }}

1. Because the Eval function is used, the number leading 0 is considered octal, such as 012 equals 10

Other Notes

Complete implementation Please download the code, comments clear, recommended to use Google Chrome or Firefox browser Open, there are questions can comment or contact me HTML+CSS+JS implementation of the scientific calculator

The code address is as follows:
Http://www.demodashi.com/demo/13751.html

Note: This copyright belongs to the author, by the demo master, refused to reprint, reprint need the author authorization

HTML+CSS+JS Realization Scientific Calculator