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 相关文章推荐
JavaScript 学习笔记(五)
Dec 31 Javascript
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
浅析javascript的return语句
Dec 15 Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 Javascript
javascript实现弹幕墙效果
Nov 28 Javascript
js+css3实现简单时钟特效
Sep 13 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 Javascript
JavaScript中遍历的十种方法总结
Dec 15 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面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
php中hashtable实现示例分享
2014/02/13 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
js保留两位小数使用toFixed实现
2013/07/29 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
javaScript基础详解
2017/01/19 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
基于jquery.page.js实现分页效果
2018/01/01 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
Python之os操作方法(详解)
2017/06/15 Python
Python队列的定义与使用方法示例
2017/06/24 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
MySQL面试题目集锦
2016/04/14 面试题
大学毕业的自我鉴定
2013/10/08 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
物业管理专业自荐信
2014/07/01 职场文书
国际贸易系求职信
2014/08/09 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
庆七一主持词
2015/06/29 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书