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

添加javascript功能

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

JS简易计算器的实现，以及代码的优化的更多相关文章

  1. js简易计算器底层运算逻辑(带撤销功能)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. 用js制作简易计算器及猜随机数字游戏

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

  3. 使用html+css+js实现简易计算器

    使用html+css+js实现简易计算器, 效果图如下: html代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  4. 原生JS实现简易计算器

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. [java代码库]-简易计算器（第二种）

    [java代码库]-简易计算器(第二种) 第二种方案:在程序中不使用if/switch……case等语句,完成计算器功能. <html> <head> <title> ...

  6. 项目：JS实现简易计算器案例

    组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解  的 项目:JS实现简易计算器案例

  7. JS实现简易计算器的7种方法

    先放图(好吧比较挫) 方法一:最容易版 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta ...

  8. js之简易计算器

    <!DOCTYPE html PUBLIC "-//W3C//Dli XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JS编写简易计算器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head lang=" ...

随机推荐

  1. [CF1192B]动态直径

    题意 给一棵固定形态的树,边有边权,每次修改一条边权,在线求出修改后树的直径. 思考 写出树的全dfs序.生成方式为:每当一个点进栈或入栈时,记录它的编号. 考虑这个dfs序上两点之间的距离.设某个节 ...

  2. phpstudy切换的php7.1版本php-cgi报错

    phpstudy切换的php7.1版本php-cgi报错 是因为没有装对应vc的插件. 下载地址:https://www.microsoft.com/zh-CN/download/details.as ...

  3. ES6笔记分享 part 2

    ECMAScript ES6 从一脸懵逼到灵活运用 接 part 1 New String Methods const id = 'adcd123456x'; const fan = 'I love ...

  4. Docker底层架构之基础架构

    Docker 采用了 C/S架构,包括客户端和服务端. Docker daemon 作为服务端接受来自客户 的请求,并处理这些请求(创建.运行.分发容器). 客户端和服务端既可以运行在一个机器上,也可 ...

  5. Spring注解开发系列VIII --- SpringMVC

    SpringMVC是三层架构中的控制层部分,有过JavaWEB开发经验的同学一定很熟悉它的使用了.这边有我之前整理的SpringMVC相关的链接: 1.SpringMVC入门 2.SpringMVC进 ...

  6. Arduino系列之按键模块（一）

    今天我将简单介绍按键模块计数的原理: 我们常用的按键及按键模块有2脚和4脚的,其内部结构如图所示,当按下按键时就会接通按键两端,当放开时,两端自然断开.                         ...

  7. JAVA&&JAVA WEB开发包U盘封装版

    难以忍受机房的开发环境,就简单实现了将所有的开发文件封装进了U盘. 基于wmic的强大功能,实现了机房变态环境下的设置环境变量OS不用重新启动OS! install.bat @echo off mod ...

  8. 消息中间件面试题31道RabbitMQ+ActiveMQ+Kafka

    消息中间件面试题31道RabbitMQ+ActiveMQ+Kafka 前言 文章开始前,我们先了解一下什么是消息中间件? 什么是中间件? 非底层操作系统软件,非业务应用软件,不是直接给最终用户使用的, ...

  9. 一分钟简单了解 JSON Web Token

    JSON Web Token(JWT)是一个开放的标准(RFC 7519),它定义了一个紧凑且自包含的方式,用于在各方之间作为 JSON 对象安全地传输信息.由于此信息是经过数字签名的,因此可以被验证 ...

  10. CERC2017 H Hidden Hierarchy(树+模拟)

    题意: 在一些给定的目录里按要求展开到制定大小并按字典序输出 思路: 因为有目录这个东西,所以想到模拟一个类似字典树的东西,不过这里每个儿子可能有n个节点,而且不能O(1)查询了 代码超长.. #in ...