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 相关文章推荐
JS Timing
Apr 21 Javascript
js 提交和设置表单的值
Dec 19 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
javascript模块化简单解析
Apr 07 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
jqTransform美化表单
2015/10/10 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
python中强大的format函数实例详解
2018/12/05 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
物流仓储实习自我鉴定
2013/09/25 职场文书
旅游管理专业生自荐信范文
2014/01/02 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
共青团员自我评价范文
2014/09/14 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
会计实训总结范文
2015/08/03 职场文书