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 相关文章推荐
jQuery 图片切换插件(代码比较少)
May 07 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 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
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
php无限级分类实现方法分析
2016/10/19 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
jquery 插件学习(五)
2012/08/06 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python函数参数类型*、**的区别
2015/04/11 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
教你怎样写好自我评价
2013/10/05 职场文书
医药个人求职信范文
2014/01/29 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
责任担保书范文
2014/05/21 职场文书
企业总经理任命书
2014/06/05 职场文书
绿色环保口号
2014/06/12 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
拾金不昧表扬信
2015/01/16 职场文书
违纪检讨书范文
2015/01/27 职场文书
公司开除员工通知
2015/04/22 职场文书
心灵点滴观后感
2015/06/02 职场文书
优质护理服务心得体会
2016/01/22 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
SSM VUE Axios详解
2021/10/05 Vue.js
一文解答什么是MySQL的回表
2022/08/05 MySQL
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers