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 相关文章推荐
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
js验证上传图片的方法
May 12 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
JavaScript判断数组类型的方法
Oct 23 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
详解vue v-model
Aug 31 Javascript
如何用threejs实现实时多边形折射
May 07 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
再说下636单管机
2021/03/02 无线电
基于php iconv函数的使用详解
2013/06/09 PHP
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
php银联网页支付实现方法
2015/03/04 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
jquery中animate动画积累的解决方法
2013/10/05 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
jupyter notebook 重装教程
2020/04/16 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
药学专业个人的自我评价
2013/12/31 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
岗位说明书标准范本
2014/07/30 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
特此通知格式
2015/04/27 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
go语言中http超时引发的事故解决
2021/06/02 Golang