javascript实现简易计算器的代码


Posted in Javascript onMay 31, 2016

今天闲来无聊,想写点什么,突然想到用javascript写一个计算器。程序还存在很多的Bug,先在这里记录一下,以后慢慢更正。

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>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>

以上这篇javascript实现简易计算器的代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
JS获取鼠标选中的文字
Aug 10 Javascript
javascript中this用法实例详解
Apr 06 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
javascript实现任务栏消息提示的简单实例
May 31 #Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 #Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 #Javascript
javascript事件模型介绍
May 31 #Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 #Javascript
javascript事件处理模型实例说明
May 31 #Javascript
jQuery基础知识点总结(必看)
May 31 #Javascript
You might like
php 魔术函数使用说明
2010/02/21 PHP
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
解析javascript 实用函数的使用详解
2013/05/10 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
快速入手Python字符编码
2016/08/03 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
详解Python自建logging模块
2018/01/29 Python
深入理解Django-Signals信号量
2019/02/19 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
新郎新娘婚礼答谢词
2014/01/11 职场文书
片区教研活动总结
2014/07/02 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
HTML基础详解(上)
2021/10/16 HTML / CSS
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android