html科学计算器,html+css+js实现科学计算器
项目描述
纯html+css+js实现一个科学计算器,支持平方开方指数对数等基本函数,支持键盘输入,有简单和高级两种模式
文件结构
纯html+css+js实现,文件结构非常简单,就三个文件。
演示效果
实验设计
将按钮的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);
支持键盘输入,所以非法输入英文和中文时,都对输入进行屏蔽
// 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];
}
计算时使用eval函数进行求值,如果表达式中含有//或者/**/时,eval会将其当成注释,所以要处理这种情况。求值时需要将每个函数名,如xxx替换成Math.xxx,才能被eval识别。
var reg = new RegExp("[a-z]{2,}", "g");
var res = exp.value.match(reg); //regular expression to find function name
if (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);
}
}
因为使用eval函数,故数字前导0将视为八进制,如012等于10
其他说明
完整实现请下载代码,注释清晰,推荐使用谷歌浏览器或火狐浏览器打开,有问题可以评论或联系我html+css+js实现科学计算器
注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权
原文:https://www.cnblogs.com/demodashi/p/9443636.html
html科学计算器,html+css+js实现科学计算器相关推荐
- html+css+js实现科学计算器
代码地址如下: http://www.demodashi.com/demo/13751.html 项目描述 纯html+css+js实现一个科学计算器,支持平方开方指数对数等基本函数,支持键盘输入,有 ...
- 一节前端课:html+css+js做个计算器
QQ突然弹出来一个前端公开课的提示,由于一直想学前段的知识,点进去了,收获了一些东西,做个记录. 题目:计算器的实现 技术:html+css+js 1 . body里放俩div,一个大的包一个小的,小 ...
- html + css + js 实现简易计算器
使用LICEcap工具截取的效果图: 计算器页面实现: 为计算器的input输入框添加disabled="disabled"属性,防止从键盘中直接输入除小数点之外的非数字符号:设置 ...
- 绝对干货!纯用HTML+CSS+JS 编写的计算器应用
一道笔试题 之前偶然看到一个公司的笔试题,题目如下: 用HTML5.CSS3.JavaScript,做一个网页,实现如下图形式计算器 具体要求: 有且只有一个文件:index.html.不允许再有其他 ...
- 基于HTML/CSS/JS的年龄计算器 | 带有免费源码
- JavaScript,js实现 科学计算器,普通计算器,在线计算器
JavaScript,js实现 科学计算器,普通计算器,在线计算器 样式 普通计算器 高级计算器 js计算逻辑 样式 普通 高级 普通计算器 <div class="calculato ...
- html css制作计算器,使用html+css+js实现计算器
使用html+css+js实现计算器,开启你的计算之旅吧 效果图: 代码如下,复制即可使用: /* 主体 */ .counter{ width: 396px; height: 486px; backg ...
- 使用html css js实现计算器
使用html css js实现计算器,开启你的计算之旅吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html><html lang="en"> ...
- 科学计算机java算法实现,(Java)科学型计算器开发及实现.doc
(Java)科学型计算器开发及实现 淮北师范大学 科学型计算器的开发与实现 学 院 计算机科学与技术 专 业学 生 姓 名学 号指导教师姓名科学型计算器的开发与实现 作 者: 指导教师: 摘 要:目前 ...
- html、css、js实现简易计算器
学习HTML,CSS,JS一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需 ...
最新文章
- JQuery-学习笔记04【基础——JQuery基础案例】
- MySQL调优(二):数据类型和schema优化,MySQL8.0取消查询缓存的原因
- Angular父子Component之间的事件通知机制
- 跟我一起学.NetCore之EF Core 实战入门,一看就会
- java 自定义map_自定义写实现java中map中的功能(简易)
- Linux 下 Weblogic 的安装 、配置以及发布
- 【分享】计算机ers,读博、国企、互联网公司该如何选择?
- Docker网络实践运用
- 参观移动公司机房感想
- [文档]CSS中文字体对照表
- 怎样利用计算机名共享打印设置,怎样设置打印机共享?
- httprunner 3.x学习2 - 测试用例结构(testcase)
- Java工作流引擎:jBPM、Activiti以及SWF
- 阿里网盘官网网页,怎么隐藏的这么深
- 扇贝单词英语版_产品分析报告
- 联想用u盘重装系统步骤_联想笔记本u盘重装系统,详细教您联想笔记本怎么使用u盘重装系统...
- S5P4418裸机开发(一):相关工具准备
- 总结Android系统启动完整流程(六)
- [易飞]包材Forcast四周滚动需求
- OPNsense用户手册-Netflow导出和分析
热门文章
- 33.卷1(套接字联网API)---调试技术
- 23.PHP的哈希表实现
- 10.生命周期和Zend引擎
- 4. Javascript 函数
- 使用猴子测试工具(1)
- [2019杭电多校第四场][hdu6614]AND Minimum Spanning Tree(贪心)
- Mysql问题1862
- python2.x提示这个错误:UnicodeDecodeError: 'ascii' codec can't decode byte 0xe8 in position
- html5实现拖拽上传头像
- MySql数据库帮助类:DbHelperMySQL