酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
酷站

【云小站】新老客都返现+现金红包+瓜分60万奖池
酷站

js

旗下栏目: php js asp Flex Ajax JSP jquery asp.net C语言 java 正则表达式 微信小程序 Android IOS

JS实现简易计算器代码

来源:互联网搜集 作者:秩名 人气: 发布时间:2020-02-14
本篇文章主要介绍了JS实现简易计算器代码,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

用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>

这样就圆满完成咯
版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://blog.csdn.net/qq_44758351/article/details/104297370?request_id=&utm_source=distribute.pc_feed.none-task

相关文章

  • 京东优选小程序的实现代码介绍

    京东优选小程序的实现代码介绍

    写在前面 过年有大把的时光,为何一直宅在家里不出家门看着电脑,这究竟是道德的沦丧还是人性的泯灭...这一切都还得从一只蝙蝠说起... 咳咳,好了不皮了,言归正传。微信推出的小程序可谓是轻量又强大,所以最近我也开始了小程序的学习,......
    02-27
  • 详解Antd-Select组件的用法

    详解Antd-Select组件的用法

    一、Antd-Select提供几种类型 最基础版只提供下拉功能的选择器 带搜索功能的下拉选择器 可多选的下拉选择器 可搜索、可多......
    02-27
  • JavaScript实现打砖块游戏的代码

    JavaScript实现打砖块游戏的代码

    html+css部分 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 7......
    02-27
  • javascript数组精简技巧

    javascript数组精简技巧

    数组是 JS 最常见的一种数据结构,咱们在开发中也经常用到,在这篇文章中,提供一些小技巧,帮助咱们提高开发效率。 1. 删除数组的重复项 2. 替换数组中的特定值 有时在创建代码时需要替换数组中的特定值,有一种很好的简短方法可以做到这一......
    02-27
  • 原生javascript制作贪吃蛇小游戏的方法

    原生javascript制作贪吃蛇小游戏的方法

    !--1、 创建场景 -- !-- 2、定义初始数据 以及随机食物 -- !-- 3、控制贪吃蛇方向 -- !-- 4、判断位置以及和随机食物的位置 增加贪吃蛇长度 -- HTML部分 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 ......
    02-27
  • BootStrap前端框架使用方法介绍

    BootStrap前端框架使用方法介绍

    1.概念: Bootstrap,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。 好处: 1.定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果......
    02-26
  • 微信小程序录音实现功能并上传的教程(使用node解析接收)

    微信小程序录音实现功能并上传的教程(使用node解析接收)

    背景 我在开发小程序的时候,有需求要实现录音功能,并能上传给服务器。小程序录音功能我是使用的微信的 wx.getRecorderManager() 实现的,通过该方法创建实例,实例录音得到的文件是本地临时文件,上传文件需要使用微信的 wx.uploadFile......
    02-26
  • 原生javascript运动函数的封装(匀速、抛物线、多属性的运动等)

    原生javascript运动函数的封装(匀速、抛物线、多属性的运动等)

    代码如下: //封装匀速运动//参数:// 1、dom对象// 2、样式属性(top,left,width,height,opacity等等)// 3、起始位置,结束位置// 4、速度:时间间隔,步长// 5、方向://返回值function moveObj(domObj,attr,startValue,endValue,......
    02-23
  • es6中Promise对象基本功能与用法介绍

    es6中Promise对象基本功能与用法介绍

    Promise 是异步编程的一种解决方案,解决回调函数和事件 ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。 下面代码创造了一个Promise实例。 基本用法 ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。 ? 1 2 3 ......
    02-23
  • 原生JavaScript之es6中Class的用法

    原生JavaScript之es6中Class的用法

    es6class写法 ? 1 2 3 4 5 6 7 8 9 class Point { constructor(x, y) { this .x = x; this .y = y; } toString() { return ( + this .x + , + this .y + ) ; } } es5写法 ? 1 2 3 4 5 6 7 8 function Point(x, y) { this .x = x; this .y......
    02-23

最新更新