JS实现简易计算器


Posted in Javascript onFebruary 14, 2020

用JS实现简易计算器,供大家参考,具体内容如下

首先创建结构和样式

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  body{
   margin:0;
   padding:0;
   background-color: #abcdef;
  }
  .cal{
   width:560px;
   height:100px;
   margin:0 auto;
   padding-top:300px;
  }
 </style>
</head>
<body>

 <div class="cal">
  <p>
   <input type="text" class="num1" value="1">
   <span class="sign">+</span>
   <input type="text" class="num2" value="1">
   <span>=</span>
   <span class="res">2</span>
  </p>
  <p>
   <input type="button" value="+">
   <input type="button" value="-">
   <input type="button" value="*">
   <input type="button" value="/">
  </p>   
 </div>
<script>


</script>

</body>
</html>

然后添加Java script

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  body{
   margin:0;
   padding:0;
   background-color: #abcdef;
  }
  .cal{
   width:560px;
   height:100px;
   margin:0 auto;
   padding-top:300px;
  }
 </style>
</head>
<body>

 <div class="cal">
  <p>
   <input type="text" class="num1" value="1">
   <span class="sign">+</span>
   <input type="text" class="num2" value="1">
   <span>=</span>
   <span class="res">2</span>
  </p>
  <p>
   <input type="button" value="+" class="btn">
   <input type="button" value="-" class="btn">
   <input type="button" value="*" class="btn">
   <input type="button" value="/" class="btn">
  </p>   
 </div>

<script>
 var cal=document.querySelector(".cal");
 var num1=cal.querySelector(".num1");
 var num2=cal.querySelector(".num2");
 var sign=cal.querySelector(".sign");
 var res=cal.querySelector(".res");

 var btns=cal.querySelectorAll(".btn");

 btns[0].onclick=add;
 btns[1].onclick=subtract;
 btns[2].onclick=multiply;
 btns[3].onclick=divide;

 function add(){
  sign.innerHTML="+";
  //由于DOM获取到的值都是字符串形式,因此进行操作时需要先转为number类型
  res.innerHTML=Number(num1.value)+Number(num2.value);
 }
 function subtract(){
  sign.innerHTML="-";
  res.innerHTML=Number(num1.value)-Number(num2.value);
 }
 function multiply(){
  sign.innerHTML="*";
  res.innerHTML=Number(num1.value)*Number(num2.value); 
 }
 function divide(){
  sign.innerHTML="/";
  res.innerHTML=Number(num1.value)/Number(num2.value); 
 }
</script>

</body>
</html>

代码的优化:

循环实现绑定

给一个外部接口,用于新增运算

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  body{
   margin:0;
   padding:0;
   background-color: #abcdef;
  }
  .cal{
   width:560px;
   height:100px;
   margin:0 auto;
   padding-top:300px;
  }
 </style>
</head>
<body>

 <div class="cal">
  <p>
   <input type="text" class="num1" value="1">
   <span class="sign">+</span>
   <input type="text" class="num2" value="1">
   <span>=</span>
   <span class="res">2</span>
  </p>
  <p>
   <input type="button" value="+" class="btn" title="add">
   <input type="button" value="-" class="btn" title="subtract">
   <input type="button" value="*" class="btn" title="multiply">
   <input type="button" value="/" class="btn" title="divide">
   <input type="button" value="%" class="btn" title="mod">
  </p>   
 </div>

<script>
 var cal=document.querySelector(".cal");
 var num1=cal.querySelector(".num1");
 var num2=cal.querySelector(".num2");
 var sign=cal.querySelector(".sign");
 var res=cal.querySelector(".res");

 var btns=cal.querySelectorAll(".btn");

 //给每个按钮绑定事件
 for(var i=0;i<btns.length;i++){
  operate(i);
 }

 //运算函数
 function operate(i){
  var op=btns[i].value;//获取运算
  var opName=btns[i].title;//获取运算名
  //绑定事件
  btns[i].onclick=function(){
   sign.innerHTML=op;
   res.innerHTML=operation[opName](Number(num1.value),Number(num2.value));
  }
 }

 var operation={
  add:function(n1,n2){
   return n1+n2;
  },
  subtract:function(n1,n2){
   return n1-n2;
  },
  multiply:function(n1,n2){
   return n1*n2;
  },
  divide:function(n1,n2){
   return n1/n2;
  },
  //给一个新增运算的接口
  addOperation:function(name,fn){
   //如果该运算不存在
   if(!this.name){
    this[name]=fn;
   }
  }
 }

 //新增取余运算
 operation.addOperation("mod",function(n1,n2){
  return n1%n2;
 });
</script>

</body>
</html>

这样就圆满完成咯

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
JS如何获取地址栏的参数实例讲解
Oct 06 Javascript
js数组中去除重复值的几种方法
Aug 03 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 #Javascript
node.js中npm包管理工具用法分析
Feb 14 #Javascript
vue-cli创建的项目中的gitHooks原理解析
Feb 14 #Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 #Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 #Javascript
JavaScript实现Tab选项卡切换
Feb 13 #Javascript
Angular 多模块项目构建过程
Feb 13 #Javascript
You might like
QueryPath PHP 中的jQuery
2010/04/11 PHP
javascript 新浪背投广告实现代码
2009/07/07 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
python判断端口是否打开的实现代码
2013/02/10 Python
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
Python函数返回值实例分析
2015/06/08 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
人机交互程序 python实现人机对话
2017/11/14 Python
Python学习pygal绘制线图代码分享
2017/12/09 Python
python matplotlib画图实例代码分享
2017/12/27 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
Python 实现微信自动回复的方法
2020/09/11 Python
python 实现逻辑回归
2020/12/30 Python
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
SQL面试题
2013/12/09 面试题
人事助理岗位职责
2013/11/18 职场文书
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
股权转让意向书
2014/04/01 职场文书
道德之星事迹材料
2014/05/03 职场文书
文明社区申报材料
2014/08/21 职场文书
拆迁委托协议书
2014/09/15 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers