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 ...
随机推荐
- 改动UINavigationBar （导航栏）上NavigationBarItem 的字体大小和颜色的用法
//创建一个左边button UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithTitle:@"<" ...
- eclispe中如何创建web项目
xian 1.从file中点击---->new----->other---->javaEE----->web---->Dynamic Web project----&g ...
- 版本号控制-搭建gitserver
GitHub是一个免费托管开源码的Gitserver,假设我们不想公开项目的源码,又不想付费使用.那么我们能够自己搭建一台Gitserver. 以下我们就看看,怎样在Ubuntu上搭建Gitserve ...
- Java图像渐变
图像渐变我们大体想一下思路无非是这样:将图像所有的像素点的RBG,每个点就减去相同的量,而且这个量是个渐变的量.是的,就是这样,我们的程序也是这个思路,不过就是没有单纯的“想”这么简单了.我这里只编写 ...
- 什么时候用button，什么时候用a标签
什么时候用button,什么时候用a标签 一.问题 能实现链接功能的标签一般就a标签,button标签,input submit标签 input submit肯定是提交表单的时候用 那什么时候用but ...
- HDU 6182 A Math
A Math Problem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
- 51Nod 迷宫问题（最短路+权值）（模板）
你来到一个迷宫前.该迷宫由若干个房间组成,每个房间都有一个得分,第一次进入这个房间,你就可以得到这个分数.还有若干双向道路连结这些房间,你沿着这些道路从一个房间走到另外一个房间需要一些时间.游戏规定了 ...
- Oracle 启动失败报错“TNS-12555: TNS:permission denied”解决办法
[oracle@testdb admin]$ lsnrctl start LSNRCTL for Linux: Version 11.2.0.4.0 - Production on 10-FEB- ...
- hive学习笔记-高级查询
聚合函数 count计数 count(*):不全都是NULL.就加1:count(1):当仅仅要有一列是NULL就不会加1:count(col):当col列不为空就会加1 sum求和 sum(可转成数 ...
- js31---观察者模式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...