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 相关文章推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
select标记美化--JS式插件、后期加载
Apr 01 Javascript
JQuery的$命名冲突详细解析
Dec 28 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
JS跨域请求的问题解析
Dec 03 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
JavaScript实现轮播图特效
Apr 10 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 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 SEO优化之URL优化方法
2011/04/21 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
php计算整个目录大小的方法
2015/06/19 PHP
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
Python lxml模块安装教程
2015/06/02 Python
python实现FTP服务器服务的方法
2017/04/11 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
python同步两个文件夹下的内容
2019/08/29 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
Python文件操作基础流程解析
2020/03/19 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
Python是怎样处理json模块的
2020/07/16 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
总经理岗位职责范本
2014/02/02 职场文书
上课说话检讨书500字
2014/11/01 职场文书
今日说法观后感
2015/06/08 职场文书
2016特色励志班级口号
2015/12/24 职场文书
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js