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 相关文章推荐
jquery easyui的tabs使用时的问题
Mar 23 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
js处理表格对table进行修饰
May 26 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
详解js的视频和音频采集
Aug 09 Javascript
vue 调用 RESTful风格接口操作
Aug 11 Javascript
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也可以?成Shell Script
2006/10/09 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
javascript some()函数用法详解
2014/11/13 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
python调用windows api锁定计算机示例
2014/04/17 Python
python服务器与android客户端socket通信实例
2014/11/12 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
总经理办公室主任岗位职责
2013/11/12 职场文书
工程项目经理岗位职责
2013/12/15 职场文书
三方协议书范本
2014/04/22 职场文书
小学生爱国演讲稿
2014/04/25 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
python+opencv实现目标跟踪过程
2022/06/21 Python