首页
所有分类
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 相关文章推荐
jquery制作居中遮罩层效果分享
Feb 21 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 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
scss(1) KVM(1) Yolov5(1) vue-cli3.x(1) watch(1) Jmerte(1) 项目打包(2) vue-router-link(1) 自定义组件(1) TimePickerView(1)
You might like
删除及到期域名的查看（抢域名必备哦）
2008/05/14 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
Joomla开启SEF的方法
2016/05/04 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
cookie丢失问题(认证失效) Authentication （用户验证信息）也会丢失
2009/06/04 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
python发送伪造的arp请求
2014/01/09 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
详解python之协程gevent模块
2018/06/14 Python
Python列表解析配合if else的方法
2018/06/23 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
python 带时区的日期格式化操作
2020/10/23 Python
Airbnb爱彼迎官网：成为爱彼迎房东，赚取收入
2019/03/14 全球购物
时尚孕妇装：HATCH Collection
2019/09/24 全球购物
微型企业创业投资计划书
2014/01/10 职场文书
房地产推广策划方案
2014/05/19 职场文书
双拥工作宣传标语
2014/06/26 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
教师节老师寄语
2015/05/28 职场文书