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实现科学计算机的更多相关文章

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

    代码地址如下:http://www.demodashi.com/demo/13751.html 项目描述 纯html+css+js实现一个科学计算器,支持平方开方指数对数等基本函数,支持键盘输入,有简 ...

  2. Windows下如何更新 node.js

    因为在Windows下是没有n模块的并不支持npm install -g n  n latest更新,所以只能老老实实安装 1.在Path环境变量下查看自己的node.js安装路径 计算机-属性-高级 ...

  3. JS简单数据类型

    JS数据类型 在计算机中,不同的数据所需要占用的空间是不同的,为了便于把数据分析称所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型 简单数据类型 简单数据类型 说明 默认值 Numb ...

  4. js - 基础 之 预编译总结

    js运行步骤 语法解析(检查有无语法错误) 预编译 解释运行(将 js 翻译成计算机识别的语言(0.1组成),翻译一行执行一行) 预编译 [全局]: 创建 GO( Grobal Object ) 对象 ...

  5. jquery如此强大,为什么还要写原生呢?

    这是一个伪标题,其实是一篇年终总结. 在这家公司一年多,蛮多收获的.大部分来自自己,小部分来自公司. 做前端开发到现在,我觉得可以分为两部分. 前半部分做项目用原生js,jquery以及各种基于jq的 ...

  6. javascript学习笔记全记录

          js的初步了解     1.就是用来修改样式的,修改的是行内样式.任何样式都能够修改.     2.css里面怎么写js就怎么写.     3.任何元素都能加事件:事件都要小写 js的三大 ...

  7. RESEACH PAPER

      个,proquest的username和password赫然在目,别急,再看第4个结 果"HB Thompson Subscription Online Databases", ...

  8. CMD-NET命令详解(转载)

    本文转自http://www.cnblogs.com/chenjq0717/archive/2010/05/09/1730934.html net命令大全,net命令用法,net网络命令,net命令使 ...

  9. 框架基础:ajax设计方案(二)---集成轮询技术

      上一篇文章介绍了ajax技术核心方法,和跨域的问题(只要后台支持跨域默认post就可以),这篇文章讲解一下使用ajax实现的轮询技术,至于iframe,SSE服务器单向推送,以及webSocket ...

随机推荐

  1. centOS6.3(64bit)Hadoop的Eclipse开发环境搭建

    操作系统centos6.3(64位) 一个namenode 两个datanode Hadoop版本号:hadoop-1.1.2 Eclipse版本号:eclipse-standard-kepler-S ...

  2. 内网使用 IPV6 之 Chrome 浏览器 扩展程序 篇

    手机端的 Google Chrome 浏览器在打开 "流量节省程序"后,它会通过 Google 的服务器中转流量,这台服务器支持 IPV4 和 IPV6.想在PC端使用类似的&qu ...

  3. SQL Server字符串分割函数

  4. [PWA] Deal with caches in PWA

    The takeway is to know when we should cache the content? When we should clean the caches? 1. When sh ...

  5. BZOJ 1507 NOI2003 Editor Splay

    题目大意: 1.将光标移动到某一位置 2.在光标后插入一段字符串 3.删除光标后的一段字符 4.输出光标后的一段字符 5.光标-- 6.光标++ 和1269非常像的一道题,只是弱多了 几个问题须要注意 ...

  6. thinkphp5空控制器和空操作

    thinkphp5空控制器和空操作 一.总结 1.空控制器和空操作用:空控制器和空操作都是为了防止网站上的用户恶意输入,网站上线的话必须加上, 2.空操作:空操作就是在一般的控制器里面加上一个 _em ...

  7. SQL2012的新分页方法

    SELECT BusinessEntityID , FirstName , LastName FROM Person.Person ORDER BY BusinessEntityID OFFSET ( ...

  8. iTOP-4412开发板使用

    使用环境:win7 旗舰64位,VMware11 使用使用板上提供的ubuntu12.04,用VMWARE直接打开虚拟机,因为之前开发epc9600开发板,所以虚拟机网络已经设置过,加载ubuntu1 ...

  9. Javascript 继承和克隆

    个人总结: call 继承的是父类私有 prototype 继承的父类公有 create 可以将公有或私有继承到子类上去(克隆) for in 克隆 不管公有还是私有的都克隆成私有的 1.原型继承:将 ...

  10. 洛谷 P1416 攻击火星

    P1416 攻击火星 题目描述 一群外星人将要攻击火星. 火星的地图是一个n个点的无向图.这伙外星人将按照如下方法入侵,先攻击度为0的点(相当于从图中删除掉它),然后是度为1的点,依此类推直到度为n- ...