JS编写的科学计算器
最近半个月编写了一个JS+ＣＳＳ＋ＨＴＭＬ的网页计算器，从最初的具有简陋界面的简单计算器改版到最终具有科学／标准计算器转换功能并且界面非常友好的计算器，收获良多！总的来说，代码简单，通俗易读，下面贴上代码，供前端新手学习！欢迎提出宝贵意见，不吝指正！
ＨＴＭＬ代码（代码中仅仅是计算器界面内容布局）：
<html>
<head>
<title>计算器</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script src="script.js"></script> </head> <body> <div id="calculator">
<a href="http://write.blog.csdn.net/postlist" id='record'>计Sweet Smile</a>
<div class="rescult">
<textarea type="text" id="result0" οnfοcus="this.blur();"></textarea>
<textarea type="text" id="result" οnfοcus="this.blur();"></textarea>
</div>
<div>
<section class="model-1"> <!--包含按钮的一个长形区域-->
<div class="checkbox" οnclick="styleChange()">
<!--包含按钮的一个较小长形区域-->
<input type="checkbox"/>
<label>科学标准</label> <!--按钮底部的灰色滑动区-->
</div>
</section>
</div> <!--标准计算器布局-->
<div id="rows" style="display:inline;">
<div class="row1">
<button id="bt1" οnclick="zero()">C</button>
<button id="bt2" οnclick="back()">DEL</button>
<button id="bt3" οnclick="divide()">÷</button>
<button id="bt4" οnclick="times()">×</button>
</div>
<div class="row2">
<button id="bt5" οnclick="num(7)">7</button>
<button id="bt6" οnclick="num(8)">8</button>
<button id="bt7" οnclick="num(9)">9</button>
<button id="bt8" οnclick="plus()">+</button>
</div>
<div class="row3">
<button id="bt9" οnclick="num(4)">4</button>
<button id="bt10" οnclick="num(5)">5</button>
<button id="bt11" οnclick="num(6)">6</button>
<button id="bt12" οnclick="minus()">-</button>
</div> <div id="below">
<div id="left">
<div class="row4">
<button id="bt13" οnclick="num(1)">1</button>
<button id="bt14" οnclick="num(2)">2</button>
<button id="bt15" οnclick="num(3)">3</button>
</div>
<div class="row5">
<button id="bt16" οnclick="num(0)">0</button>
<button id="bt17" οnclick="dot()">.</button>
</div>
</div>
<div id="right">
<button id="bt18" οnclick="equal()">=</button>
</div>
</div> </div> <!--科学计算器布局-->
<div id="sci" style="display:none;">
<div class="sci1">
<button id="bt21" οnclick="zero()">C</button>
<button id="bt22" οnclick="back()">DEL</button>
<button id="bt23" οnclick="pow1()">^</button>
<button id="bt24" οnclick="num('π')">π</button>
<button id="bt25" οnclick="pow2()">√</button>
</div>
<div class="sci2">
<button id="bt26" οnclick="sin()">sin</button>
<button id="bt27" οnclick="num('(')">(</button>
<button id="bt28" οnclick="num(')')">)</button>
<button id="bt29" οnclick="divide1()">1/X</button>
<button id="bt30" οnclick="divide()">÷</button>
</div>
<div class="sci3">
<button id="bt31" οnclick="cos()">cos</button>
<button id="bt32" οnclick="num(7)">7</button>
<button id="bt33" οnclick="num(8)">8</button>
<button id="bt34" οnclick="num(9)">9</button>
<button id="bt35" οnclick="times()">×</button>
</div>
<div class="sci4">
<button id="bt36" οnclick="tan()">tan</button>
<button id="bt37" οnclick="num(4)">4</button>
<button id="bt38" οnclick="num(5)">5</button>
<button id="bt39" οnclick="num(6)">6</button>
<button id="bt40" οnclick="minus()">-</button>
</div>
<div class="sci5">
<button id="bt41" οnclick="ln()">ln</button>
<button id="bt42" οnclick="num(1)">1</button>
<button id="bt43" οnclick="num(2)">2</button>
<button id="bt44" οnclick="num(3)">3</button>
<button id="bt45" οnclick="plus()">+</button>
</div>
<div class="sci6">
<button id="bt46" οnclick="log()">log</button>
<button id="bt47" οnclick="num(0)">0</button>
<button id="bt48" οnclick="dot()">.</button>
<button id="bt49" οnclick="quyu()">%</button>
<button id="bt50" οnclick="equal()">=</button>
</div> </div> </div> </body>
</html>
下面是ＪＳ代码（代码语句都是非常简单的基础语法）：
//改进： 定义一个变量记录“=”的输入与否而不必每输入数字时都要检索一遍文本框内容 var status=0; //标记所输入的是数字还是运算符号
var calcu=0; //标记所要执行的方法是哪一个 /*数字、括号及PI的输入*/
function num(x){
var str0=document.getElementById('result0').value;
var str=document.getElementById('result').value;
if(str0.indexOf("=")>0){
document.getElementById('result0').value='';
document.getElementById('result').value='0';
str=document.getElementById('result').value;
}
if(str=="0")
str='';
str+=String(x);
document.getElementById('result').value=str;
status=0;
}
//输入. （未做是否包含“.”的判断）
function dot(){
var str0=document.getElementById('result0').value;
var str=document.getElementById('result').value;
if(str0.indexOf("=")>0){
document.getElementById('result0').value='';
document.getElementById('result').value='0';
str=document.getElementById('result').value;
}
str=str+'.';
document.getElementById('result').value=str;
} /*三角函数以及'1/'计算*/
function sin(){
calcu=1;
cal();
}
function cos(){
calcu=2;
cal();
}
function tan(){
calcu=3;
cal();
}
function divide1(){
calcu=4;
cal();
}
function ln(){
calcu=5;
cal();
}
function log(){
calcu=6;
cal();
}
function cal(){
var str0=document.getElementById('result0').value;
var str=document.getElementById('result').value;
if(str0.indexOf("=")>0){
document.getElementById('result0').value='';
document.getElementById('result').value='0';
str=document.getElementById('result').value;
}
if(str=="0")
str='';
switch(calcu){
case 1: str+=String("sin(");break;
case 2: str+=String("cos(");break;
case 3: str+=String("tan(");break;
case 4: str+=String("1/");break;
case 5: str+=String("ln(");break;
case 6: str+=String("log(");break;
}
document.getElementById('result').value=str;
status=1;
} /* ^、√以及%的输入 */
function pow1(){
calcu=1;
powS();
}
function pow2(){
calcu=2;
powS();
}
function quyu(){
calcu=3;
powS();
}
function powS(){
if(status == 1)
return;
var strpow0=document.getElementById('result0').value;
var strpow=document.getElementById('result').value;
if(strpow0.indexOf("=")>0){
document.getElementById('result0').value='';
/*document.getElementById('result').value='0';*/
strpow=document.getElementById('result').value;
}
switch(calcu){
case 1: strpow+=String('^');
break;
case 2: if(strpow=='0')
strpow="√";
else{
strpow+=String('√');
}
break;
case 3: strpow+=String("%");
break;
}
document.getElementById('result').value=strpow;
status=1;
} /* +-×÷ 运算 */
function plus(){
calcu=1;
calculate();
}
function times(){
calcu=2;
calculate();
}
function divide(){
calcu=3;
calculate();
}
function calculate(){
if(status==1)
return;
var str0=document.getElementById('result0').value;
var str=document.getElementById('result').value;
if(str0.indexOf("=")>0 ){
document.getElementById('result0').value='';
/*document.getElementById('result').value='0';*/
str=document.getElementById('result').value;
}
if(str=='')
str='0';
switch(calcu){
case 1: str+='+';break;
case 2: str+='×';break;
case 3: str+='÷';break;
}
document.getElementById('result').value=str;
status=1;
}
function minus(){
var str0=document.getElementById('result0').value;
var str=document.getElementById('result').value;
if(str0.indexOf("=")>0){
document.getElementById('result0').value='';
/*document.getElementById('result').value='-';*/
str=document.getElementById('result').value+'-';
}
else
str+='-';
document.getElementById('result').value=str;
} //显示屏字符串为空
function zero(){
document.getElementById('result0').value="";
document.getElementById('result').value="0";
} //显示屏字符串减去最后一个字符
function back(){
var str0=document.getElementById('result0').value;
var str=document.getElementById('result').value;
if(str0.indexOf("=")>0 || str=='')
return;
var str1=str.substr(0,(str.length)-1)
document.getElementById('result').value=str1;
} //获取当前显示屏字符，判断所包含运算符，并做相关运算。
function equal(){
var str0=document.getElementById('result').value;
if(str0=="")
return;
var str=str0.replace(/×/g,'*'); //用正则表达式进行全部替换
str=str.replace(/÷/g,'/');
str=str.replace(/π/g,'Math.PI');
if(str.indexOf("sin")>=0){
str=str.replace(/sin/g,'Math.round(Math.sin');
str+='*1000000)/1000000'; document.getElementById('result0').value=str0.concat("=");
document.getElementById('result').value=eval(str); }
else if(str.indexOf("cos")>=0){
str=str.replace(/cos/g,'Math.round(Math.cos');
str+='*1000000)/1000000';
document.getElementById('result0').value=str0.concat("=");
document.getElementById('result').value=eval(str);
}
else if(str.indexOf("tan")>=0){
str=str.replace(/tan/g,'Math.round(Math.tan');
str+='*1000000)/1000000';
document.getElementById('result0').value=str0.concat("=");
document.getElementById('result').value=eval(str);
}
else if(str.indexOf("^")>=0){
var pos=str0.indexOf('^');
var pow1=str0.substring(0,pos);
var pow2=str0.substring(pos+1,str0.length+1);
result=Math.pow(pow1, pow2);
document.getElementById('result0').value=str0.concat("=");
document.getElementById('result').value=eval(result);
}
else if(str.indexOf("√")>=0){
var pos=str0.indexOf('√');
var pow1=str0.substring(0,pos);
var pow2=str0.substring(pos+1,str0.length+1);
if(pow1==''){
result=Math.pow(pow2,0.5);
document.getElementById('result0').value=str0.concat("=");
document.getElementById('result').value=eval(result);
}
else{
result=Math.pow(pow2, 1/pow1);
document.getElementById('result0').value=str0.concat("=");
document.getElementById('result').value=eval(result);
}
}
else if(str.indexOf("ln")>=0){
var str=str0.replace(/ln/g,'Math.round(Math.log');
str+='*1000000)/1000000';
document.getElementById('result0').value=str0.concat("=");
document.getElementById('result').value=eval(str);
}
else if(str.indexOf("log")>=0){
var str=str0.replace(/log/g,'Math.log');
str+= '/Math.log(10)';
document.getElementById('result0').value=str0.concat("=");
document.getElementById('result').value=eval(str);
}
else{
result=(eval(str));
document.getElementById('result0').value=str0.concat("=");
document.getElementById('result').value=result;
}
var a=document.getElementById('result').value;
if(a=="Infinity")
document.getElementById('result').value='∞';
else if(a=="-Infinity")
document.getElementById('result').value='-∞';
}
function styleChange(){
if(document.getElementById('rows').style.display=='inline'){
document.getElementById('rows').style.display='none';
document.getElementById('sci').style.display='inline';
}
else if(document.getElementById('rows').style.display=='none'){
document.getElementById('rows').style.display='inline';
document.getElementById('sci').style.display='none';
}
}
下面是ＣＳＳ代码（其中按钮效果部分参考了纯ＣＳＳ滑动按钮特效代码）：
body {
font-size:24px;
font-family:Arial, Georgia, "Times New Roman", Times, serif;
color:#555;
text-align:center;
background-color:#555;
}
body div{
align:center;
margin-top:5px;
}
#calculator{
align:center;
width:350px;
height:550px;
margin:10px auto;
border:#fff 2px solid;
overflow:hidden;
background-color:#f2f2f2;
}
.rescult{
align:center;
padding:10px 5px 0px 5px;
}
#result,#result0{
width:300px;
height:40px;
font-size:35px;
text-align:right;
direction:ltr;
border:#C0C0C0;
overflow:hidden;
background-color:#C0C0C0;
word-wrap : normal;
}
#result0{
font-size:25px;
}
section {
float: left;
width:100px;
padding: 0px 200px 10px 20px;
height: 50px;
}
.checkbox {
position: relative;
display: inline-block;
}
.checkbox label {
font-size:20px;
text-align: center;
padding-top: 5px;
width: 90px;
height: 30px;
position: relative;
display: inline-block;
border-radius: 46px;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.checkbox label:after {
content: '';
position: absolute;
padding-top: 20px;
width: 45px;
height: 20px;
border-radius: 40%;
left: 0;
top: -5px;
z-index: 2;
background: #f2f2f2;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-webkit-transition: 0.4s;
transition: 0.4s;
}
.checkbox input {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 5;
opacity: 0;
cursor: pointer;
}
.checkbox input:hover + label:after {
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.2);
}
.checkbox input:checked + label:after {
left: 45px;
}
.model-1 .checkbox input:checked + label {
background:#ccc ;
}
.model-1 .checkbox input:checked + label:after {
background:#f2f2f2;
} #rows{ align:center;
padding:0 3px; }
#below{
margin-top:0px;
margin-left:25px;
margin-bottom: 30px;
width:300px;
}
#left{
margin-top:0px;
float:left;
}
#right{
margin-top:10px;
float:right;
}
.row1,.row2,.row3,#below{
align:center;
}
.row3{
margin-bottom: 0px;
}
#bt1,#bt2,#bt3,#bt4,#bt5,#bt6,#bt7,#bt8,#bt9,#bt10,#bt11,#bt12,#bt13,#bt14,#bt15,#bt16,#bt17,#bt18{
font-size:18px;
width:70px;
height:70px;
background-color:#eaeaea;
cursor:pointer; }
#bt16{
width:145px;
}
#bt18{
height:140px;
}
#sci{
display:none;
}
#sci button{
font-size:18px;
width:55px;
height:55px;
background-color:#eaeaea;
cursor:pointer; }
#record{
float:right;
font-size:15px;
color:#555;
}
#record:hover{
color:red;
}
转载于：https://blog.csdn.net/sweet___smile/article/details/50417211
JS编写的科学计算器的更多相关文章
- html+css+js实现科学计算器
代码地址如下:http://www.demodashi.com/demo/13751.html 项目描述 纯html+css+js实现一个科学计算器,支持平方开方指数对数等基本函数,支持键盘输入,有简 ...
- JS实现简易的计算器
JS可以做的事多了,那就用来实现一个计算器吧 看看手机中的计算器,分为普通计算器和科学计算器 自认脑袋不够大,就实现一个普通版本的吧(支持正负数加减乘除等基本连续的运算,未提供括号功能) 看看 ...
- 为Node.js编写组件的几种方式
本文主要备忘为Node.js编写组件的三种实现:纯js实现.v8 API实现(同步&异步).借助swig框架实现. 关键字:Node.js.C++.v8.swig.异步.回调. 简介 首先介绍 ...
- Breach - HTML5 时代，基于 JS 编写的浏览器
Breach 是一款属于 HTML5 时代的开源浏览器项目,,完全用 Javascript 编写的.免费.模块化.易于扩展.这个浏览器中的一切都是模块,Web 应用程序在其自己的进程运行.通过选择合适 ...
- 科学计算器的Java实现
简易的科学计算器的实现 ---Java版 import javax.swing.*;//新的窗口组件包 import java.awt.*; import java.awt.event.*; publ ...
- 想找个计算器当本命？来试试UWP应用《纸书科学计算器》
久违了.上次在博客园发文还是4年前,正是高中参加NOIP的时候.这4年里发生了很多事,乃至再次看到过去的文章时,仿佛看到了自己也不熟悉的风景.最近很想把我的博客重新拾起来,慢慢灌溉,写一些微不足道的技 ...
- 关于错位动画的练习，原生js编写
最近在网上看到一个关于错位动画的文章,感觉非常有趣,便自己练习了一下,文章连接:http://www.w3cplus.com/animation/staggering-animations.html ...
- js编写验证码
这是一个简单的js编写的验证码,自己已经亲自验证,没有问题了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- Node.js编写CLI的实践
导语:通常而言,Node.js的应用场景有前后端分离.海量web页面渲染服务.命令行工具和桌面端应用等等.本篇文章选取CLI(Command Line Tools)这子领域,来谈谈Node.js编写C ...
随机推荐
- 是的，你没看错！Python可以实现自动化办公
是的,你没看错!Python可以实现自动化办公 公众号[伤心的辣条],如今越来越多的人加入到学习Python的队伍当中,尤其是对于很多职场人来说,不管你是程序员还是非程序员,Python已经为很多职场 ...
- Promise对象，究竟为何物？
Promise对象 一.什么是Promise? Promise是一种异步操作的解决方案,将写法复杂的传统的回调函数和监听事件的异步操作,用同步代码的形式表达出来. Promise避免了多级异步操作的回 ...
- Redis史上最全文章教程
Redis 2020 史上最详细Redis教程 本篇文章并不讲解Redis,只是收集 Redis的优质文章教程 ,文章包含三部分: 理论.编程实战 .面试题. 需要有一定编程功底的人学习 ,如果基础不 ...
- 持久层之 MyBatis: 第一篇：快速入门
MyBatis入门到精通 JDBC回顾 1.1.认识MyBatis 1.1.使用IDEA创建maven工程 1.2.引入mysql依赖包 1.3.准备数据 1.4 使用JDBC手写MyBatis框架 ...
- 基于Layuimini的自己封装后台模板
基于Layui的后台模板,正在开发中 交流qq群:1062635741 邮箱:zhangqueque.foxmail.com GitHub:https://github.com/ZhangQueque ...
- Python机器学习课程：线性回归算法
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 最基本的机器学习算法必须是具有单个变量的线性回归算法.如今,可用的高级机器学习算法,库和技术如此之多 ...
- 卡尔曼滤波学习笔记1-Matlab模拟温度例子--代码比较乱，还需优化
温度模拟参数选取 xk 系统状态 实际温度 A 系统矩阵 温度不变,为1 B.uk 状态的控制量 无控制量,为0 Zk 观测值 温度计读数 H 观测矩阵 直接读出,为1 wk 过程噪声 温度变化偏差, ...
- 篇章三：SVN-对文件的操作
添加文件 在检出的工作副本中添加一个Readme文本文件,这时候这个文本文件会显示为没有版本控制的状态,如图: 这时候,你需要告知TortoiseSVN你的操作,如图: 加入以后,你的文件会变成这个状 ...
- CentOS7 实战部署tomcat网站服务器
简介:实战演练tomcat网站服务器的搭建 Tomcat:是一个开源免费的Web应用服务器,性能稳定,是目前比较流行的Web应用服务器 tomcat官网下载: https://tomcat.apa ...
- 算法（Java实现）—— 贪心算法
贪心算法 应用场景-集合覆盖问题 假设在下面需要付费的广播台,以及广播台新型号可以覆盖的地区,如何选择最少的广播台,让所有地区都可以接收到信号 广播台 覆盖地区 k1 北京.上海.天津 k2 广州.北 ...