先上效果图：



简单的加减乘除功能还是有的，所以我们就考虑怎么来实现这个功能。

根据预期效果，可以确定页面中的布局要用到table tr td。

所以先放上页面布局,table的边框宽度border，colspan来设置某一行的宽度为4倍一列宽度，显示结果的地方要显示输入的所有值，先用id来区分，给value一个空，来获取其他按钮键入的value值，用name来命名：

<body>

    <table border="1">

        <!--显示结果行-->

        <tr><td colspan="4"><input id="inp1" type="text" value="" name="xianshi"/></td></tr>

        <!--第一行 清除按钮-->

        <tr>

            <td><input type="button" value="Clear" onclick="inputPCB(this)"/></td>

        </tr>

        <!--第二行-->

        <tr>

        	<td><input type="button" value="1" onclick="inputEvent(this)"/></td>

            <td><input type="button" value="2" onclick="inputEvent(this)"/></td>

            <td><input type="button"value="3" onclick="inputEvent(this)"/></td>

            <td><input type="button" value="4" onclick="inputEvent(this)"/></td>

        </tr>

        <!--第三行-->

        <tr>

        	<td><input type="button" value="5" onclick="inputEvent(this)"/></td>

            <td><input type="button" value="6" onclick="inputEvent(this)"/></td>

            <td><input type="button"value="7" onclick="inputEvent(this)"/></td>

            <td><input type="button" value="8" onclick="inputEvent(this)"/></td>

        </tr>

        <!--第四行-->

        <tr>

        	<td><input type="button" value="9" onclick="inputEvent(this)"/></td>

            <td><input type="button" value="0" onclick="inputEvent(this)"/></td>

            <td><input type="button"value="." onclick="inputEvent(this)"/></td>

            <td><input type="button" value="=" onclick="inputEquel(this)"/></td>

        </tr>

        <!--第五行-->

        <tr>

        	<td><input type="button" value="+" onclick="inputOper(this)"/></td>

            <td><input type="button" value="-" onclick="inputOper(this)"/></td>

            <td><input type="button"value="*" onclick="inputOper(this)"/></td>

            <td><input type="button" value="/" onclick="inputOper(this)"/></td>

        </tr>   

    </table>

</body>

除了清除按钮是晴空所有外，其他1234567890的按钮通用onclick=inputEvent(this)，来直接键入它的value值，这是唯一的值。运算符±*/通过操作函数inputOper来执行运算命令。

下面是JS内容，JS的各部分功用标注在注释里面：

<script type="text/javascript">

    /* 定义一个Calculator类*/

    function Calculator(){

        this.jisuan=function(num1,num2,oper){

            var res=0;

            switch(oper){

                case "+":

                    res=num1+num2;

                    break;

                case "-":

                    res=num1-num2;

                    break;

                case "*":

                    res=num1*num2;

                    break;

                case "/":

                    res=num1/num2;

                    break;

            }

            return res;

        }

    }

    //创建对象

    var calculator=new Calculator();

    /*定义全局变量*/

    var val=0; //放置输入的值

    var xval=0;//保存转换Number类型的值

    var temp=0; //保存第一次输入的值

    var oper="";//保存输入的操作符

    /*获取输入数字*/

    function inputEvent(e){

        val=e.value

        var xsval=document.getElementById("inp1");

        xsval.value+=val; //连续输入数字(String类型)

        //转换Number类型

        xval=parseFloat(xsval.value);

    }

    /*获取第一行的数据*/

    function inputPCB(e){

        //window.alert(e.value);

        var xsval=document.getElementById("inp1");

        if(e.value=="Clear"){

            xsval.value="";

        }

    }

    /*输入操作符*/

    function inputOper(e){

        oper=e.value;

        //window.alert(typeof oper);

        //oper=oper.substr(0);

        if (e.value=="+"){

            var xsval=document.getElementById("inp1");

            //保存上次计算结果，并对字符串进行转换Number类型

            temp=parseFloat(xsval.value);

            //第一次输入的值设置为空

            xsval.value="";

        }else if(e.value=="-"){

            var xsval=document.getElementById("inp1");

            temp=parseFloat(xsval.value);

            xsval.value="";

        }else if(e.value=="*"){

            var xsval=document.getElementById("inp1");

            temp=parseFloat(xsval.value);

            xsval.value="";

        }else if(e.value=="/"){

            var xsval=document.getElementById("inp1");

            temp=parseFloat(xsval.value);

            xsval.value="";

        }

    }

    /*计算结果*/

    function inputEquel(e){

        var xsval=document.getElementById("inp1");

        if(e.value=="="){

            //window.alert(xval);

            //调用对象方法

            xsval.value=calculator.jisuan(temp,xval,oper);

        }

    }

</script>

样式表简单写一下：

<style>

    input{

        width:60px;

    }

    #inp1{

        width:280px;

        text-align:right;

    }

</style>

这就是一个简单的完整的使用原生JS写出来的计算器效果。

使用JS写一个计算器的更多相关文章

  1. 用JS写一个计算器（兼容手机端）

    先看成果:1.PC端2. 首先确立html,有哪些东西我们要知道.布局大概的样子在心里有个数 <!DOCTYPE html> <html> <head> <m ...

  2. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  3. JS写一个简单日历

    JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  4. 用VBA写一个计算器

    着急的 玩家 可以 跳过“============”部分 ======================================可以跳过的 部分   开始==================== ...

  5. 前端与编译原理——用JS写一个JS解释器

    说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...

  6. 如何使用 js 写一个正常人看不懂的无聊代码

    如何使用 js 写一个正常人看不懂的无聊代码 代码质量, 代码可读性, 代码可维护性, clean code WAT js WTF https://www.destroyallsoftware.com ...

  7. 用原生js写一个"多动症"的简历

    用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...

  8. 【Part1】用JS写一个Blog（node + vue + mongoDB）

    学习JS也有一段时间了,准备试着写一个博客项目,前后端分离开发,后端用node只提供数据接口,前端用vue-cli脚手架搭建,路由也由前端控制,数据异步交互用vue的一个插件vue-resourse来 ...

  9. [NodeJS]使用Node.js写一个简单的在线聊天室

    声明:教程来自<Node即学即用>.源代码案例均出自此书.博文仅为个人学习笔记. 第一步:创建一个聊天server. 首先,我们先来写一个Server: var net = require ...

随机推荐

  1. GUI编程与CLI编程

    作为一名多年的iOS开发人员,多次触发我思酌“GUI编程与CLI编程”各自的优劣,尤其是在当我为界面交互花费大占比时间时,时常怀疑自己的工作性质,我终究还是为互联网工作的码农,而不是让互联网为我所用的 ...

  2. PAT T1011 Cut Rectangles

    大模拟题,按要求建立多边形,先定位斜边的位置,再分类讨论~ #include<bits/stdc++.h> using namespace std; ; struct node { dou ...

  3. requests库 代理

    import requests proxy = { 'http': '125.123.137.2208:9999' } res = requests.get('http://httpbin.org/i ...

  4. GIT使用教程——命令详解

    $ git init 当前目录建立GIT可以管理的仓库(版本库),生成一个.git的隐藏文件夹 $ git add <filename> 将工作区的文件修改添加到版本库的暂存区 $ git ...

  5. 【剑指Offer面试编程题】题目1506：求1+2+3+...+n--九度OJ

    题目描述: 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 输入: 输入可能包含多个测试样例. 对于每个 ...

  6. Educational Codeforces Round 73 (Rated for Div. 2)D（DP，思维）

    #define HAVE_STRUCT_TIMESPEC#include<bits/stdc++.h>using namespace std;long long a[300007],b[3 ...

  7. 「BOI2007」Mokia

    「BOI2007」Mokia 传送门 把查询拆成四部分然后容斥计算答案(二维前缀和) 然后 \(\text{CDQ}\) 分治算答案. 参考代码: #include <algorithm> ...

  8. 移动互联网APP测试流程及测试点

    1.2测试周期 测试周期可按项目的开发周期来确定测试时间,一般测试时间为两三周(即15个工作日),根据项目情况以及版本质量可适当缩短或延长测试时间.正式测试前先向主管确认项目排期. 1.3测试资源 测 ...

  9. Linux centosVMware vim 编辑模式、vim命令模式、vim实践

    一.编辑模式.命令模式 在一般模式下输入:或/可进入命令模式.在该模式下可进行走索某个字符或字符串,也可保存.替换.退出.显示行号等. /word:在光标之后查找一个字符串word,按n向后继续搜索 ...

  10. Linux centosVMware 磁盘格式化、磁盘挂载、手动增加swap空间

    一.磁盘格式化 磁盘分区后不能直接使用,需要对每一个分区格式化,格式化其实就是安装系统文件. 命令mke2fs:不支持格式化成xfs系统文件  mkfs.ext4 == mke2fs -t ext4 ...