HTML+CSS+JS Realization Scientific Calculator

Source: Internet
Author: User
Tags base 10 logarithm square root

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.