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 ...
随机推荐
- [转]C语言预处理命令详解
转载:https://www.cnblogs.com/clover-toeic/p/3851102.html 一 前言 预处理(或称预编译)是指在进行编译的第一遍扫描(词法扫描和语法分析)之前所作的 ...
- elasticsearch index 之 engine
elasticsearch对于索引中的数据操作如读写get等接口都封装在engine中,同时engine还封装了索引的读写控制,如流量.错误处理等.engine是离lucene最近的一部分. engi ...
- Day1下午解题报告
预计分数:0+30+30=60 实际分数:0+30+40=70 T1水题(water) 贪心,按长度排序, 对于第一幅牌里面的,在第二个里面,找一个长度小于,高度最接近的牌 进行覆盖. 考场上的我离正 ...
- IBM Tivoli Netview在企业网络管理中的实践（附视频）
今天我为大家介绍的一款高端网管软件名叫IBM Tivoli NetView,他主要关注是IBM整理解决方案的用户,分为Unix平台和Windwos平台两种,这里视频演示的是基于Windows 2003 ...
- Linux MTD 子系统
一.MTD子系统概述 MTD(Memory Technology Device, 内存技术设备)是用于访问memory 设备 (ROM.FLASH)的Linux子系统. 主要目的是为了使新的memor ...
- PythonOOP面向对象编程1
什么是对象? 对象是指现实中的物体或实体(拥有一系列变量.函数(方法)的) 什么事面向对象? 把一切看成对象(实例),让对象和对象之间建立关联关系 对象都有什么特征? 属性(名词)实例变量 姓名.年龄 ...
- Myeclipse集成Maven（图文说明）
myeclipse 上安装 Maven3 环境准备: JDK 1.6 Maven 3.2.5 myeclipse 2013 安装 Maven 之前要求先确定你的 JDK 已经安装配置完毕.Maven是 ...
- Android经常使用自己定义控件（二）
经常使用的Android自己定义控件分享 http://www.see-source.com//androidwidget/list.html?type=&p=1
- 终结者：借助pinyin4j相关jar包提取汉字的首字母
import net.sourceforge.pinyin4j.PinyinHelper; import net.sourceforge.pinyin4j.format.HanyuPinyinCase ...
- js39---组合模式，查找遍历树
/** *有这样一个需求 *有一个学校有2个班(一班,二班) *每个班级分2个小组(一班一组,一班二组,二班一组,二班二组) *学校计算机教室有限,每一个小组分着来上课. *考试的时候大家一起考 *请 ...