首页
所有分类
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 this调用规则说明
Mar 08 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
单线程JavaScript实现异步过程详解
May 19 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 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) WeUI(1) map(4) Pillow(2) Slice(1) 切片(1) 指针(1) random(1) 微信小程序(9) vue-esign(1)
You might like
使用数据库保存session的方法
2006/10/09 PHP
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
遍历指定目录，并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
使用Python轻松完成垃圾分类（基于图像识别）
2019/07/09 Python
通过实例解析Python return运行原理
2020/03/04 Python
Python中求对数方法总结
2020/03/10 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
python能做哪些生活有趣的事情
2020/09/09 Python
英国最出名高街品牌：Forever Unique
2018/02/24 全球购物
写一个函数，要求输入一个字符串和一个字符长度，对该字符串进行分隔
2015/07/30 面试题
后勤人员自我评价怎么写
2013/09/19 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python
Django框架之路由用法
2022/06/10 Python