首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

纯javascript代码实现计算器功能(三种方法)

Posted in Javascript onSeptember 07, 2015

今天来分享一下用纯javascript代码编写的一个计算器程序，很多行业都能用到这个程序，例如做装修预算、贷款利率等等。

首先来看一下完成后的效果：

纯javascript代码实现计算器功能(三种方法)

纯javascript代码实现计算器功能(三种方法)

方法一：

具体编写代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>计算器</title>
<style type="text/css">
*{margin:0px;padding:0px}
table{width:300px;margin:100px auto}
td{height:30px;text-align:center;line-height:30px;border:1px solid #ccc;font-size:14px} input{float:left;margin-left:30px;display:inline}
#jia,#jian,#cheng,#chu{width:30px}
</style>
<script type="text/javascript">
//以下所有的注释通用语所有的加减乘除算法。
//加法运算
function jia(){
//定义变量a,b,c
var x,y,z;
}; //通过document分别获取x，y的值 x=document.getElementById("num1").value; y=document.getElementById("num2").value; //修改x，y的字符类型，并且得到z的值 z=parseInt(x)+parseInt(y); //将z的值赋给id=result document.getElementById("result").value=z;
//减法运算
function jian(){
var x,y,z;
x=document.getElementById("num1").value;
y=document.getElementById("num2").value;
z=parseInt(x)-parseInt(y);
document.getElementById("result").value=z;
};
//乘法运算
function cheng(){
var x,y,z;
x=document.getElementById("num1").value;
y=document.getElementById("num2").value;
z=parseInt(x)*parseInt(y);
document.getElementById("result").value=z;
};
//除法运算
function chu(){
var x,y,z;
x=document.getElementById("num1").value;
y=document.getElementById("num2").value;
z=parseInt(x)/parseInt(y);
document.getElementById("result").value=z;
};
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">计算器</td>
</tr>
<tr>
<td>数字一</td>
<td><input type="text" id="num1" name="num1"></td>
</tr>
<tr>
<td>数字二</td>
<td><input type="text" id="num2" name="num2"></td>
</tr>
<tr>
<td>结果</td>
<td><input type="text" id="result" name="result"></td>
</tr>
<tr>
<td colspan="2">
<input type="button" name="jia" id="jia" value="+" onclick="jia()"> <input type="button" name="jian" id="jian" value="-" onclick="jian()">
<input type="button" name="cheng" id="cheng" value="×" onclick="cheng()"> <input type="button" name="chu" id="chu" value="/" onclick="chu()"> </td>
</tr>
</table>
</body>
</html>

代码二：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript实现计算器</title>
<style type="text/css">
input{
width:30px;
height:20px;
text-align:center;
}
#tbCalculator td
{
text-align:center;
vertical-align:middle;
}
</style>
<script type="text/javascript">
var result; //保存点击运算符之前输入框中的数值
var operator; //保存运算符
var isPressEqualsKey = false; //记录是否按下”=“键
//数字键事件
function connectionDigital(control)
{
var txt = document.getElementById('txtScream');
if(isPressEqualsKey)
{ 
txt.value = ""; //已进行过计算，则清空数值输入框重新开始
isPressEqualsKey = false;
}
//数值输入已经存在小数点,则不允许再输入小数点
if(txt.value.indexOf('.') > -1 && control.value == '.')
return false;
txt.value += control.value; //将控件值赋给数值输入框中
}
//退格键事件
function backspace()
{
var txt = document.getElementById('txtScream');
txt.value = txt.value.substring(0,txt.value.length - 1);
}
//ce键事件：清空数字输入框
function clearAll()
{
document.getElementById('txtScream').value = "";
result = "";
operator = "";
}
// +、-、*、/ 事件
function calculation(control)
{
//将运算符保存入全局变量中
operator = control.value; 
var txt = document.getElementById('txtScream');
if(txt.value == "")return false; //数值输入框中没有数字，则不能输入运算符
//将数值输入框中的值保存到计算表达式中
result = txt.value; 
//清空输入框，以待输入操作值
txt.value = ""; 
}
//计算结果
function getResult()
{
var opValue;
//计算表达式中存在运算符
var sourseValue = parseFloat(result);
var txt = document.getElementById('txtScream');
if(operator == '*')
opValue = sourseValue * parseFloat(txt.value);
else if(operator == '/')
opValue = sourseValue / parseFloat(txt.value);
else if(operator == '+')
opValue = sourseValue + parseFloat(txt.value);
else if(operator == '-')
opValue = sourseValue - parseFloat(txt.value);
txt.value = opValue;
isPressEqualsKey = true;
result = "";
opValue = "";
}
</script>
</head>
<body>
<table id="tbCalculator" width="200" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#0066FF">
<tr>
<td height="30" colspan="4" align="center">
<input type="text" name="txtScream" id="txtScream" style="width:180px; border-style:none; text-align:right;" readonly="readonly" /> </td>
</tr>
<tr>
<td height="30" colspan="2">
<input type="button" name="btnCE" id="btnCE" value="C E" style="width:80px;" align="right"; onclick="clearAll();" /></td>
<td height="30" colspan="2">
<input type="button" name="btn10" id="btn10" value="Backspace" style="width:80px;" align="right"; onclick="backspace();" /></td>
</tr>
<tr>
<td height="30"><input type="button" name="btn7" id="btn7" value="7" onclick="connectionDigital(this);" /></td>
<td><input type="button" name="btn8" id="btn8" value="8" onclick="connectionDigital(this);"/></td>
<td><input type="button" name="btn9" id="btn9" value="9" onclick="connectionDigital(this);" /></td>
<td><input type="button" name="btn6" id="btn6" value="/" onclick="calculation(this);" /></td>
</tr>
<tr>
<td height="30">
<input type="button" name="btn4" id="btn4" value="4" onclick="connectionDigital(this);"/></td>
<td><input type="button" name="btn5" id="btn5" value="5" onclick="connectionDigital(this);"/></td>
<td><input type="button" name="btn6" id="btn6" value="6" onclick="connectionDigital(this);"/></td>
<td><input type="button" name="btn13" id="btn13" value="*" onclick="calculation(this);" /></td>
</tr>
<tr>
<td height="30">
<input type="button" name="btn1" id="btn1" value="1" onclick="connectionDigital(this);"/></td>
<td><input type="button" name="btn2" id="btn2" value="2" onclick="connectionDigital(this);"/></td>
<td><input type="button" name="btn3" id="btn3" value="3" onclick="connectionDigital(this);"/></td>
<td><input type="button" name="btn18" id="btn18" value="-" onclick="calculation(this);" /></td>
</tr>
<tr>
<td height="30"><input type="button" name="btn0" id="btn0" value="0" onclick="connectionDigital(this);"/></td>
<td><input type="button" name="btndot" id="btndot" value="." onclick="connectionDigital(this);" /></td>
<td><input name="btn22" type="button" id="btn22" value="=" onclick="getResult();" /></td>
<td><input type="button" name="btn23" id="btn23" value="+" onclick="calculation(this);" /></td>
</tr>
</table>
</body>
</html>

方法三：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="description" content="javascript计算器，由三水点靠木制作" /> 
<title>计算器</title> 
<script type="text/javascript"> 
alert("本计算器由三水点靠木制作"); 
function getResult(type){ 
if(checkData()){ 
} 
var no1=parseInt(document.jisuanqi.no1.value); 
var no2=parseInt(document.jisuanqi.no2.value); 
var result; 
switch(type){ 
case '+': 
result = no1+no2; 
break; 
case '-': 
result =no1-no2; 
break; 
case '*': 
result =no1*no2; 
break; 
case '/': 
result =no1/no2; 
break; 
case '%': 
result =no1%no2; 
break; 
} 
document.jisuanqi.result.value=result; 
} 
function checkData(){ 
if(document.jisuanqi.no1.value==""){ 
alert("第一个数字不能为空!请重新输入"); 
return; 
} 
if(document.jisuanqi.no2.value==""){ 
alert("第二个不能为空!请重新输入"); 
return; 
} 
if(document.jisuanqi.no1.value=="0"){ 
alert("第一个不能为零!请重新输入"); 
return; 
} 
if(isNaN(document.jisuanqi.no1.value)){ 
alert("第一个不是数字!请重新输入"); 
return; 
} 
if(isNaN(document.jisuanqi.no2.value)){ 
alert("第二个不是数字!请重新输入"); 
} 
} 
</script> 
</head> 
<body> 
<font size="6" color="#000000">本计算器由三水点靠木制作<br>QQ：873695957</font> 
<p align="center" /> 
<form name="jisuanqi"> 
  no1:<input name="no1" /><br> 
  no2:<input name="no2" /><br> 
  result:<input name="result" /><br> 
<input type="button" value="+" onclick="getResult('+')" /> 
  <input type="button" value="-" onclick="getResult('-')" /> 
  <input type="button" value="*" onclick="getResult('*')" /> 
  <input type="button" value="/" onclick="getResult('/')" /> 
  <input type="button" value="%" onclick="getResult('%')" /> 
  </form> 
</p> 
</body> 
</html>

以上通过三种方法实现了纯javascript代码实现计算器功能，希望大家喜欢。

纯javascript代码实现计算器功能(三种方法)

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript继承方式实例
Oct 29 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
详解js中的几种常用设计模式
Jul 16 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 #Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 #Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 #Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 #Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 #Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 #Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 #Javascript
逻辑备份(1) into outfile(1) springCloud(6) 限流器(1) 轮询锁(1) 异步机制(1) sql模式(1) 死锁(3) 生命周期(1) 远程连接(2)
You might like
十天学会php之第七天
2006/10/09 PHP
php 中的str_replace 函数总结
2007/04/27 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
jquery 使用简明教程
2014/03/05 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
React Native 截屏组件的示例代码
2017/12/06 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
vue实现压缩图片预览并上传功能（promise封装）
2019/01/10 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
浅谈对yield的初步理解
2017/05/29 Python
Scrapy框架使用的基本知识
2018/10/21 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
非洲NO.1网上商店：Jumia肯尼亚
2016/08/18 全球购物
Under Armour安德玛德国官网：美国高端运动科技品牌
2019/03/09 全球购物
英国领先的电动可调床制造商：Laybrook
2019/12/26 全球购物
秋季运动会加油词
2015/07/18 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
数据库之SQL技巧整理案例
2021/07/07 SQL Server
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android
在js中修改html body的样式
2021/11/11 Javascript
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android