js实现科学计算机
js实现科学计算机
一、总结
1、算法：这个科学计算机是用普通基础算法实习的，没有用栈，用栈要简单很多，
2、发现规律，编程分类：编程的时候，运算符分两种，一元运算符和二元运算符，分类了就好写很多了。
3、用了一个全局变量来记录是否已经按下了运算符键。
4、js中with()函数：with函数中，属性的对象名可以省略，因为with中有。
5、substring函数：截取字符串，退格的时候用。
6、(tr>(td>input)*3)*4：快速输出html标签，>号表示从属，*n表示n个
7、css样式要好好看看
二、js实现科学计算机
截图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器练习</title>
<style type="text/css">
table{
margin: 15px auto;
font-size: 22px;
border:5px outset orange; }
#tab-1,#tab-2,#tab-3{
border:3px outset rgba(15,10,10,0.3);
}
input{
outline: none;
box-shadow:5px 5px 2px rgba(100,100,100,0.8) inset;
} #txtnum{
text-align: right;
height: 50px;
width: 100%;
background:#fff;
font-size: 22px;
}
td{
padding: 5px;
background: #ccc; }
[type=button]{
width: 60px;
height: 40px;
border-radius: 5px;
background: #fff;
box-shadow:5px 3px 2px rgba(100,100,100,0.6) inset;
}
</style>
</head>
<body>
<!-- 主表设计 -->
<table id="main" cellspacing="0">
<!-- (tr>td*3)*2 快捷方式-->
<tr>
<td colspan="2">
<input type="text" id="txtnum" value="0" >
</td>
<td>
<table id="tab-1">
<tr>
<td><input type="button" id="cc" value="清除"
onclick="txtnum.value='0';result=0 "></td>
<td><input type="button" id="tg" value="退格"
onclick="backspace()"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table id="tab-2">
<!-- (tr>(td>input)*3)*4 -->
<tr>
<td><input type="button" id="sin" value="sin"
onclick="math('sin')"></td>
<td><input type="button" id="cos" value="cos"
onclick="math('cos')"></td>
<td><input type="button" id="tan" value="tan"
onclick="math('tan')"></td>
</tr>
<tr>
<td><input type="button" id="asin" value="asin"
onclick="math('asin')"></td>
<td><input type="button" id="acon" value="acon"
onclick="math('acon')"></td>
<td><input type="button" id="atan" value="atan"
onclick="math('atan')"></td>
</tr>
<tr>
<td><input type="button" id="PI" value="PI"
onclick="math('PI')"></td>
<td><input type="button" value="1/x"
onclick="math('1/x')"></td>
<td><input type="button" value="exp"
onclick="math('exp')"></td>
</tr>
<tr>
<td><input type="button" value="lnx"
onclick="math('lnx')"></td>
<td><input type="button" value="lgx"
onclick="math('lgx')"></td>
<td><input type="button" value="n!"
onclick="math('n!')"></td>
</tr>
</table>
</td>
<td>
<table id="tab-3">
<!-- (tr>(td>input)*3)*4 -->
<tr>
<td><input type="button" id="" value="7"
onclick="num('7')"></td>
<td><input type="button" id="" value="8"
onclick="num('8')"></td>
<td><input type="button" id="" value="9"
onclick="num('9')"></td>
</tr>
<tr>
<td><input type="button" id="" value="4"
onclick="num('4')"></td>
<td><input type="button" id="" value="5"
onclick="num('5')"></td>
<td><input type="button" id="" value="6"
onclick="num('6')"></td>
</tr>
<tr>
<td><input type="button" id="" value="1"
onclick="num('1')"></td>
<td><input type="button" value="2"
onclick="num('2')"></td>
<td><input type="button" value="3"
onclick="num('3')"></td>
</tr>
<tr>
<td><input type="button" value="0"
onclick="num('0')"></td>
<td><input type="button" value="." onclick="decimal()"></td>
<td><input type="button" value="="
onclick="compute('=')"></td>
</tr>
</table>
</td>
<td>
<table id="tab-3">
<tr>
<td><input type="button" id="" value="+"
onclick="compute('+')"></td>
<td><input type="button" id="" value="取整"
onclick="math('i')"></td>
</tr>
<tr>
<td><input type="button" id="" value="-"
onclick="compute('-')"></td>
<td><input type="button" id="" value="取余"
onclick="compute('%')"></td>
</tr>
<tr>
<td><input type="button" id="" value="*"
onclick="compute('*')"></td>
<td><input type="button" id="" value="x^y"
onclick="compute('x^y')"></td>
</tr>
<tr>
<td><input type="button" id="" value="/"
onclick="compute('/')"></td>
<td><input type="button" id="" value="+/-"
onclick="reverse()"></td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
//operator 运算符
var Boo=false; //判断是否按下计算符号的布尔变量；
var result=0; //存储计算数据的变量
var ope; //存储计算符号的变量 function $(x){
return document.getElementById(x)
} function decimal(){
var txt=$('txtnum');
if(Boo){
txt.value='0.' //若接受过运算符，文本框清零
} else{
if (txt.value.indexOf('.')==-1) { //判断数值中是否已经有小数点
txt.value+='.'; //若没有则加上
}
}
Boo=false; //若接受过运算符，文本框不能清零
}
//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
//如果要检索的字符串值没有出现，则该方法返回 -1。 function num(Num){
var txt=$('txtnum');
if (Boo) {
txt.value=Num;
Boo=false;
}else{
if (txt.value=='0') {
txt.value=Num
}else{
txt.value+=Num;
}
}
} function compute(op){
var onum=$('txtnum').value;
if (onum=='') {onum=0}
Boo=true;
switch(ope){
case '+':
result+=parseFloat(onum);break;
case '-':
result-=parseFloat(onum);break;
case '*':
result*=parseFloat(onum);break;
case '/':
result/=parseFloat(onum);break;
case '=':
result=parseFloat(onum);break;
case '%':
result%=onum;break;
//{result%=onum;break;}break;
case 'x^y':
result=Math.pow(result,onum);break;
//{result=Math.pow(result,onum);break;}break;
default:result=parseFloat(onum)
}
$('txtnum').value=result;
ope=op; } function math(op){
var onum=$('txtnum').value;
if (onum==''){alert('数据不能为空')};
Boo=true;
with(Math){
switch(op){
case 'sin':result=sin(onum);break;
case 'cos':result=cos(onum);break;
case 'tan':result=tan(onum);break;
case 'asin':result=asin(onum);break;
case 'acos':result=acos(onum);break;
case 'atan':result=atan(onum);break;
case 'PI':result=PI;break;
case '1/x':result=1/onum;break;
case 'exp':result=exp(onum);break;
case 'lnx':result=log(onum);break;
case 'lgx':result=log(onum)/log(10);break; case 'i':result=floor(onum);break; case 'n!':result=jc(onum);break;
default:result=parseFloat(onum);
}
}
$('txtnum').value=result;
} function jc(a){
if(a==1){
return 1;
}else{
return jc(a-1)*a
}
}
function reverse(){
var Num1=$('txtnum').value;
if (Num1=='') {
alert('数据不能为空')
}else{
$('txtnum').value*=-1;
} } function backspace(){
var txt=$('txtnum');
txt.value=txt.value.substring(0,txt.value.length-1);
if (txt.value=='') {txt.value=0}
}
</script>
</body>
</html>
js实现科学计算机的更多相关文章
- html+css+js实现科学计算器
代码地址如下:http://www.demodashi.com/demo/13751.html 项目描述 纯html+css+js实现一个科学计算器,支持平方开方指数对数等基本函数,支持键盘输入,有简 ...
- Windows下如何更新 node.js
因为在Windows下是没有n模块的并不支持npm install -g n n latest更新,所以只能老老实实安装 1.在Path环境变量下查看自己的node.js安装路径 计算机-属性-高级 ...
- JS简单数据类型
JS数据类型 在计算机中,不同的数据所需要占用的空间是不同的,为了便于把数据分析称所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型 简单数据类型 简单数据类型 说明 默认值 Numb ...
- js - 基础 之 预编译总结
js运行步骤 语法解析(检查有无语法错误) 预编译 解释运行(将 js 翻译成计算机识别的语言(0.1组成),翻译一行执行一行) 预编译 [全局]: 创建 GO( Grobal Object ) 对象 ...
- jquery如此强大，为什么还要写原生呢？
这是一个伪标题,其实是一篇年终总结. 在这家公司一年多,蛮多收获的.大部分来自自己,小部分来自公司. 做前端开发到现在,我觉得可以分为两部分. 前半部分做项目用原生js,jquery以及各种基于jq的 ...
- javascript学习笔记全记录
js的初步了解 1.就是用来修改样式的,修改的是行内样式.任何样式都能够修改. 2.css里面怎么写js就怎么写. 3.任何元素都能加事件:事件都要小写 js的三大 ...
- RESEACH PAPER
个,proquest的username和password赫然在目,别急,再看第4个结 果"HB Thompson Subscription Online Databases", ...
- CMD-NET命令详解（转载）
本文转自http://www.cnblogs.com/chenjq0717/archive/2010/05/09/1730934.html net命令大全,net命令用法,net网络命令,net命令使 ...
- 框架基础：ajax设计方案（二）---集成轮询技术
上一篇文章介绍了ajax技术核心方法,和跨域的问题(只要后台支持跨域默认post就可以),这篇文章讲解一下使用ajax实现的轮询技术,至于iframe,SSE服务器单向推送,以及webSocket ...
随机推荐
- Android自己定义效果——随机抽奖
那天逛android开源码的时候,看到一个wheel menu的自己定义效果,就是类似人家的那种转盘抽奖,把人家project看了下.认为非常好玩.可是不想在他上面改,于是就自己想了一个类似的随即抽奖 ...
- .Net接口调试与案例
1.通过查看日志,可以看出问题的原因. 2.断点调试. 3.本地测试,确保无误后,线上测试. 4.输出测试. 通过get的方式,测试接口. // [HttpPost] public ActionRes ...
- C#定义变量
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- js插件---jqGrid插件如何使用
js插件---jqGrid插件如何使用 一.总结 一句话总结:jqdrid还是依赖加js初始化的方式,很多时候插件的问题一般都是引入的css和js的问题,jqgrid里面遇到的问题就是下载包有一些js ...
- onvif开发总结
ONVIF开发经验总结 ONVIF开发经验总结............................................................................. ...
- WinRAR 5.21 去弹窗 疑惑
WinRAR 突然就有弹窗广告了 ,找了个方法,重新写一下安装目录下的 rarreg.key,确实有效果但是重写的和之前的完全一样啊,至少在文本中完全一样,怎么回事. 下面附上两个文件, 1.key ...
- Kinect 开发 —— 近距离探测
如何将Kinect设备作为一个近距离探测传感器.为了演示这一点,我们处理的场景可能在以前看到过.就是某一个人是否站在Kinect前面,在Kinect前面移动的是人还是什么其他的物体.当我们设置的触发器 ...
- Java：异常体系
异常的类别:可处理异常,运行时异常,非运行时异常 子类重写父类方法,父类方法有异常抛出, 子类重写父类的方法? 不能比父类抛出更大的异常 前言:java 中的异常处理机制你真的理解了吗?掌握了吗?ca ...
- 【DRF版本】
目录 使用内置的URLPathVersioning类 使用自定义的版本控制类 首先,我们开发的项目会有多个版本. 其次,我们的项目版本会随着更新越来越多,我们不可能因出了新版本就不维护旧版本了. 那么 ...
- Dubbo学习总结（3）——Dubbo-Admin管理平台和Zookeeper注册中心的搭建
ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提供的功 ...