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实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
无闪烁更新网页内容JS实现
Dec 19 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 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
5.PHP的其他功能
2006/10/09 PHP
PHP递归调用的小技巧讲解
2013/02/19 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
实例讲解PHP表单
2020/06/10 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
javascript继承的六大模式小结
2015/04/13 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
Vuejs+vue-router打包+Nginx配置的实例
2018/09/20 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
Python 的描述符 descriptor详解
2016/02/27 Python
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
Python定时器线程池原理详解
2020/02/26 Python
python自动下载图片的方法示例
2020/03/25 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
中文系学生自荐信范文
2013/11/13 职场文书
《母鸡》教学反思
2014/02/25 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
Redis性能监控的实现
2021/07/09 Redis
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android