如何实现简单计算器(附代码)
本篇文章给大家详细介绍一下javascript实现简单计算器的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
JS实现简单计算器
页面布局设计(HTML+CSS)
由于在之前的博客中有对html和css进行详细的讲解,再次就不多叙述,直接上代码。因为js中用到了JQuery选择器所以在html中使用<script></script>标签引入了JQuery,在html中为每个按钮单击绑定计算器事件cal()并传入当前点击对象this。
.html文件:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>简单计算器</title><link rel="stylesheet" type="text/css" href="./style.css"> <!-- css样式 --><script src="https://code.jquery.com/jquery-latest.min.js"></script> <!-- 引用JQuery库 --></head><body><p><table><tr><td colspan="3"><input type="text" value="0"/></td></tr><tr><td><button id="c11" onclick="cal(this)">+</button></td><td><button id="c12" onclick="cal(this)">-</button></td><td><button id="c13" onclick="cal(this)">×</button></td><td><button id="c14" onclick="cal(this)">/</button></td></tr><tr><td><button id="c21" onclick="cal(this)" value="7">7</button></td><td><button id="c22" onclick="cal(this)" value="8">8</button></td><td><button id="c23" onclick="cal(this)" value="9">9</button></td><td rowspan="2"><button id="c24" onclick="cal(this)">C</button></td></tr><tr><td><button id="c31" onclick="cal(this)" value="4">4</button></td><td><button id="c32" onclick="cal(this)" value="5">5</button></td><td><button id="c33" onclick="cal(this)" value="6">6</button></td></tr><tr><td><button id="c41" onclick="cal(this)" value="1">1</button></td><td><button id="c42" onclick="cal(this)" value="2">2</button></td><td><button id="c43" onclick="cal(this)" value="3">3</button></td><td rowspan="2"><button id="c44" onclick="cal(this)">=</button></td></tr><tr><td colspan="2"><button id="c51" onclick="cal(this)" value="0">0</button></td><td><button id="c53" onclick="cal(this)">.</button></td></tr></table></p><script src = "./calculator.js"></script> <!-- js脚本 --></body></html>
.css文件:
input{width: 200px;height:50px;margin-bottom: 10px;padding: 0;font:18px bold;}button{width: 50px;height: 40px;margin-bottom: 10px;border: 1px dashed black;background-color: #ffc4cc;}#c24{height: 93px;}#c44{height: 93px;}#c51{width: 122px;}#c44,#c24,#c14{margin-left:10px;}
静态页面如图示:
实现计算部分(JS)
1.功能:实现简单的数值的加减乘除计算,以及清屏功能
2.操作:例如:123×29;以此点击1、2、3、,点击×号,依次点击2、9,最后点击=,即可计算出结果3567
示例如图:
3.缺点:
- 不能进行负数的计算,会产生NaN错误;
- 不能进行连续计算,一次只能进行两个数之间的运算;如果要在之前结果上继续计算可以直接按运算符号和下一个数;若要开始新的计算,则需要先清屏。
4.思路展示:
- 文本框显示:因为文本框显示的内容根据点击的按钮实时变化,为了修改简单,在这里使用JQuery选择器选中文本框,赋值给一个全局变量input,之后我们根据input的val()方法修改它的值就好。
代码如下:
var input = $("input");
- 按钮id获取:因为后面我们要根据不同的按钮进行不同的操作,所以在cal()函数中第一步先获取按钮的id,方便后面做判断用。
代码如下:
let btn = e.id;
- 数值输入:根据按钮的id判断是否为数字或者小数点,如果是的话,进行数字输入操作。先判断当前文本框的值是不是0,如果是0,则用当前输入覆盖input的值;若非0,则将当前输入连接在input值后面。
代码如下:
//若input的值为0
input.val(btn_value);//若input的值非0
input.val(input.val()+btn_value);
- 符号输入:根据按钮的id判断是否为运算符号,如果是的话,进行符号输入操作。不考虑连续运算,则先判断当前文本框的值是否含有+、×、/(不考虑-是因为要进行减法运算),如果有,则弹出“不支持该运算”;若无,则将该运算符号连接在input值后面。
代码如下:
//若input的值含有+、×、/alert("连续运算功能未上线!")//若input的值不含有+、×、/
input.val(input.val()+当前运算符号);
- 数值计算:根据按钮的id判断是否为等号,如果是的话,进行数值计算操作。进行选择判断,使用indexOf()方法判断input的值中含有+、×、/哪个标点符号,然后以该符号位置为分隔,使用substring()方法截取该符号前面的值强制转化为Float型后赋值给num1,截取该符号后面的值强制转化为Float型后赋值给num2,进行相应的计算。(注意除法时分母不能为0)
代码如下:
if(input_value.indexOf("+")!==-1){pos = input_value.indexOf("+");num1 = parseFloat(input_value.substring(0,pos));num2 = parseFloat(input_value.substring(pos+1,input_value.length));input.val(num1+num2);}else if(input_value.indexOf("-")!==-1){pos = input_value.indexOf("-");num1 = parseFloat(input_value.substring(0,pos));num2 = parseFloat(input_value.substring(pos+1,input_value.length));input.val(num1-num2);}else if(input_value.indexOf("×")!==-1){pos = input_value.indexOf("×");num1 = parseFloat(input_value.substring(0,pos));num2 = parseFloat(input_value.substring(pos+1,input_value.length));input.val(num1*num2);}else if(input_value.indexOf("/")!==-1){pos = input_value.indexOf("/");num1 = parseFloat(input_value.substring(0,pos));num2 = parseFloat(input_value.substring(pos+1,input_value.length));if(num2-0 === 0){alert("分母不能为0!");}else{input.val(num1/num2);}}
- 清屏:根据按钮的id判断是否为符号C,如果是的话,进行清屏操作。
代码如下:
input.val(0);
5. JavaScript文件如下:
"use strict"var input = $("input");function cal(e){let btn = e.id;//清零if( btn === "c24"){input.val(0);}//数值输入else if(btn === "c51"||btn === "c41"||btn === "c42"||btn === "c43"||btn === "c31"||btn === "c32"||btn === "c33"||btn === "c21"||btn === "c22"||btn === "c23"){let btn_value = document.getElementById(btn).getAttribute("value");if( input.val() === "0" ){input.val(btn_value);}else{input.val(input.val()+btn_value);}}else if(btn === "c11"){let input_value = input.val();if(input_value.indexOf("+") === -1&&input_value.indexOf("-") === -1&&input_value.indexOf("×") === -1&&input_value.indexOf("/") === -1){input.val(input.val()+"+");}else{alert("连续运算功能未上线!")}}else if(btn === "c12"){let input_value = input.val();if(input_value.indexOf("+") === -1&&input_value.indexOf("-") === -1&&input_value.indexOf("×") === -1&&input_value.indexOf("/") === -1){input.val(input.val()+"-");}else{alert("连续运算功能未上线!")}}else if(btn === "c13"){let input_value = input.val();if(input_value.indexOf("+") === -1&&input_value.indexOf("-") === -1&&input_value.indexOf("×") === -1&&input_value.indexOf("/") === -1){input.val(input.val()+"×");}else{alert("连续运算功能未上线!")}}else if(btn === "c14"){let input_value = input.val();if(input_value.indexOf("+") === -1&&input_value.indexOf("-") === -1&&input_value.indexOf("×") === -1&&input_value.indexOf("/") === -1){input.val(input.val()+"/");}else{alert("连续运算功能未上线!")}}else if(btn === "c53"){input.val(input.val()+".");}else if(btn === "c44"){let pos,num1,num2;let input_value = input.val();if(input_value.indexOf("+")!==-1){pos = input_value.indexOf("+");num1 = parseFloat(input_value.substring(0,pos));num2 = parseFloat(input_value.substring(pos+1,input_value.length));input.val(num1+num2);}else if(input_value.indexOf("-")!==-1){pos = input_value.indexOf("-");num1 = parseFloat(input_value.substring(0,pos));num2 = parseFloat(input_value.substring(pos+1,input_value.length));input.val(num1-num2);}else if(input_value.indexOf("×")!==-1){pos = input_value.indexOf("×");num1 = parseFloat(input_value.substring(0,pos));num2 = parseFloat(input_value.substring(pos+1,input_value.length));input.val(num1*num2);}else if(input_value.indexOf("/")!==-1){pos = input_value.indexOf("/");num1 = parseFloat(input_value.substring(0,pos));num2 = parseFloat(input_value.substring(pos+1,input_value.length));if(num2-0 === 0){alert("分母不能为0!");}else{input.val(num1/num2);}}}}
【推荐学习:javascript高级教程】
如何实现简单计算器(附代码)相关推荐
- VC++6.0 win32 控制台应用程序 简单应用 附代码
**VC++6.0 win32 控制台应用程序 简单应用 附代码 ** .cpp 文件名 注意:在源文件添加如下声明: #include //没有.h using namespace std;//使用 ...
- php定义一个计算器函数,php学习之简单计算器实现代码
PHP实现简单计算器 //单路分支 if(isset($_GET["sub"])) { $num1=true;//数字1是否为空标记 $num2=true;//数字2是否为空标记 ...
- matlab watershed函数简单实现_函数指针方法实现简单状态机(附代码)
之前写过一篇状态机的实用文章,很多朋友说有几个地方有点难度不易理解,今天给大家换种简单写法,使用函数指针的方法实现状态机. 状态机简介 有限状态机FSM是有限个状态及在这些状态之间的转移和动作等行为的 ...
- 从实例一步一步入门学习SpringCloud的Eureka、Ribbon、Feign、熔断器、Zuul的简单使用(附代码下载)
场景 SpringCloud -创建统一的依赖管理: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/102530574 Sprin ...
- andorid简单计算器java源码_求大佬用java写个简单计算器的代码
[Java] 纯文本查看 复制代码package com.xing.tag; import java.awt.BorderLayout; import java.awt.Color; import j ...
- 用浏览器做人脸检测,竟然这么简单?(附代码)
1.背景与场景 人脸检测(Face Detection)算是老生常谈的课题了,在诸多行业应用广泛,例如金融.安防.电子商务.智能手机.娱乐图片等行业.其中涉及的技术也在不断的演变,下面简要介绍几种思路 ...
- 基于c++的马氏距离算法代码_监控警戒区基于掩码算法的简单实现(附代码)
视频地址:https://www.ixigua.com/6870543177913205251/ 这是利用图片掩码实现的一个视频监控区域警戒功能代码,当人进出警戒区域时,自动记录一张图片到本地,效果视 ...
- python编程例子 输入 输出-推荐 :手把手教你用Python创建简单的神经网络(附代码)...
原标题:推荐 :手把手教你用Python创建简单的神经网络(附代码) 作者:Michael J.Garbade:翻译:陈之炎:校对:丁楠雅 本文共2000字,9分钟. 本文将为你演示如何创建一个神经网 ...
- 简单有趣的 NLP 教程:手把手教你用 PyTorch 辨别自然语言(附代码)
简单有趣的 NLP 教程:手把手教你用 PyTorch 辨别自然语言(附代码) 雷锋网(公众号:雷锋网)按:本文作者甄冉冉,原载于作者个人博客,雷锋网已获授权. 最近在学pyTorch的实际应用 ...
最新文章
- 如何在Linux使用Eclipse + CDT开发C/C++程序 OS Linux C/C++ gcc
- mandatory oracle 字段,Oracle 数据库需要在2019年April之前Mandatory升级的说明
- CodeForces - 1408E Avoid Rainbow Cycles(思维+最大生成树)
- 如何通过预加载器提升网页加载速度
- SharePoint2010内容类型剖析(四)
- php 生成器作用,php 生成器的理解和使用
- 下载java离线文档的方法
- 数据分析领域七大热门职业
- LeetCode 606. Construct String from Binary Tree
- MapReduce 之shuffle过程
- php函数、类和对象以及类的封装、继承、类的静态方法、静态属性
- 关于webpack编译scss文件
- SOLID原则(转载)
- mysql Packet for query is too large (1185 1024)异常
- 广义相对论场方程的发现是必然的
- 远程teamviewer|远程工具teamviewer|远程控制软件teamviewer
- 苹果恢复出厂设置好吗_苹果承认Apple Music导致iPhone耗电严重 唯一解决方法是恢复出厂设置...
- php+怎么加边框,ps给图片加上漂亮的边框-PS教程
- 天道酬勤系列之Java 实例 - 方法重载
- 03-sketch基本工具使用