html+css+js实现科学计算器

柔光的暖阳◎ 2022-05-11 04:34 239阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/13751.html][http_www.demodashi.com_demo_13751.html]

#### 项目描述 ####

纯html+css+js实现一个科学计算器，支持平方开方指数对数等基本函数，支持键盘输入，有简单和高级两种模式

#### 文件结构 ####

![JWn9HBksqMW4o5I9vIz.png][]  
纯html+css+js实现，文件结构非常简单，就三个文件。

#### 演示效果 ####

![eOc9JmrmAR7E3HE5aax.png][]  
![Lb3ZhyKJaJpHbixgpd1.png][]

#### 实验设计 ####

1.  将按钮的value设置为按钮显示的字符，当点击按钮的时候，输入框增加的字符为按钮的value，其中函数的按钮增加的字符为最后一个x所在的位置前面的字符，即到左括号。

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.  支持键盘输入，所以非法输入英文和中文时，都对输入进行屏蔽

// 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.  计算时使用eval函数进行求值，如果表达式中含有//或者/\*\*/时，eval会将其当成注释，所以要处理这种情况。求值时需要将每个函数名，[如xxx替换成Math.xxx][xxx_Math.xxx]，才能被eval识别。

1.  因为使用eval函数，故数字前导0将视为八进制，如012等于10

#### 其他说明 ####

完整实现请下载代码，注释清晰，推荐使用谷歌浏览器或火狐浏览器打开，有问题可以评论或联系我html+css+js实现科学计算器

> 代码地址如下：  
> [http://www.demodashi.com/demo/13751.html][http_www.demodashi.com_demo_13751.html]

> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_13751.html]: http://www.demodashi.com/demo/13751.html
[JWn9HBksqMW4o5I9vIz.png]: /images/20220511/9959e90000d94fa185d77b69bcee4b4d.png
[eOc9JmrmAR7E3HE5aax.png]: /images/20220511/b6e556bee108477aa3335376c3497e5b.png
[Lb3ZhyKJaJpHbixgpd1.png]: /images/20220511/56b81906dc5544fca1d8a36b26a5a14a.png
[xxx_Math.xxx]: http://xn--xxxMath-i22m294dt6cy4n.xxx