使用JS写一个计算器

最新推荐文章于 2024-08-22 19:52:30 发布
最新推荐文章于 2024-08-22 19:52:30 发布
阅读量2w 收藏 67
点赞数 21
分类专栏： 前端开发 JS知识总结 JS特效 JavaScript VUE学习加油站 文章标签： JS开发 JS写计算器 原生JS 计算其功能实现
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38194393/article/details/83861993
版权

先上效果图：
在这里插入图片描述
简单的加减乘除功能还是有的，所以我们就考虑怎么来实现这个功能。
根据预期效果，可以确定页面中的布局要用到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的按钮通用οnclick=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写出来的计算器效果。

沉默的小猴子
关注
专栏目录
使用 JavaScript 创建一个简单的计算器
qq_60597540的博客
11-05 7698
通过这个示例，我们可以看到使用 JavaScript 创建一个简单的计算器是非常简单的。JavaScript 提供了丰富的功能和灵活性，使得开发者能够轻松地实现各种交互功能。以上代码是一个简单的 HTML 页面，其中包括两个输入框和四个按钮，用于实现加、减、乘、除操作。JavaScript 是一种广泛应用于网页开发的脚本语言，它具有灵活、动态和强大的特性。本文将演示如何使用 JavaScript 创建一个简单的计算器，并实现基本的加减乘除操作。MDN Web 文档：JavaScript。
js制作简单计算器
08-19
用的时候还需要下载个jqury框架，里面不但有计算器实现的js方法，js的一些字符验证方法！挺实用的！
JS运算符详解：从基础到高级的全面指南
最新发布
fanchen4139的博客
08-22 1330
JS运算符详解：从基础到高级的全面指南
js写了一个计算器
xiaoLong2345的博客
10-28 616
本人小白一枚，如有发表文章仅仅为了共同学习
JS原生——编写简易计算器
m0_64954687的博客
12-06 9340
计算器
【Web开发技术】Javascript编写的简易计算器
爱.NET
12-18 267
08年9月入学，12年7月毕业，结束了我在软件学院愉快丰富的大学生活。此系列是对四年专业课程学习的回顾，索引参见：http://blog.csdn.net/xiaowei_cqu/article/details/7747205 用JS编写计算器 Javascript相当只简洁方便，颇有MATLAB之风 这是曾经web课上的作业，用js写个简单的计算器 这里关键是定义计算器的函...
在页面上使用javascript写一个计算器
04-24
在网页上创建一个JavaScript计算器是一项基础但实用的编程任务，它可以帮助我们理解DOM操作、事件处理和基本的数学计算。让我们深入探讨这个话题。 首先，HTML（HyperText Markup Language）是构建网页的基本语言，...
js写的简单计算器
01-09
在本案例中，我们讨论的是一个使用JavaScript编写的简单计算器。这个计算器可能包含了基本的数学运算，如加法、减法、乘法和除法，这些是计算器的基本功能。 首先，让我们深入了解一下JavaScript中的基础语法和数据...
用uniapp实现一个简单的计算器
06-08
uniapp是一个基于Vue.js的多端开发框架，它允许开发者使用一套代码编写，然后可以发布到iOS、Android、Web（H5）、以及各种小程序（微信/支付宝/百度/QQ/快手/抖音/淘宝）、快应用等多个平台。在本项目中，我们将...
用javascript做一个计算器,用js做一个计算器代码
阿发狗伪原创
10-18 3725
大家好，给大家分享一下怎么用javascript做一个简单的计算器，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！  由于在之前的博客中有对html和css进行详细的讲解，再次就不多叙述，直接上代码。因为js中用到了JQuery选择器所以在html中使用标签引入了JQuery，在html中为每个按钮单击绑定计算器事件cal()并传入当前点击对象thispython for语句用法。   .html文件：   .css文件：   静态页面如图示： 1.功能：实现简单的数值的加减乘
js编写的一个网页版的计算器
05-16
这是一个用javascript编写的计算器，界面是网页版。而且采用的是css布局，而不是用表格，模仿的是windows8.1自带的计算器。
一个用JS做的简易计算器
05-06
一个用JS做的简易计算器,不是很完整，有兴趣的朋友可扩展一下
用js写一个计算器
热门推荐
小王同学
05-05 1万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;Calaulate~&lt;/title&gt; &lt;style&gt; * { padding: 0; margin: 1px; }
JS写一个简易计算器
lanseguhui的博客
06-28 1646
&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;简单计算器&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;input type=
JavaScript实现计算器
weixin_55017780的博客
05-17 3331
运用运算符来制作一个简易的计算器，通过讲解来让大家认识一下计算器实现原理。 第一步、 构建HTML的布局，先写四个span标签备注好参数和运算符和结果，再写一个div盒子里面包含第二行内容，第二行代表参数一的input标签为了实现可以上下选择的效果只需要改变将input中type里text类型该为number类型即可，而代表运算符的是一个下拉框里面包含加减乘除，只需要在select标签里给四个option代表加减乘除。参数二则是一个input的文本框，计算的按钮则使用一个button按钮可以通过鼠标点击
用JavaScript写一个简单的计算器
ayi644640的博客
10-02 865
本文使用js实现了一个简单的加、减、乘、除计算器。 以下是css部分代码： *{ padding:0; margin:0; color: #424242; } .outer{ width:300px; height:auto; outline:1px solid #b9b9b9; margin:50px...
js编写的简易计算器
W1365966490的专栏
02-27 427
/*   获得用户输入的数字 绑定onclick事件   开始运算   求结果  */   var flag = true;   function getnum(num){    if(!flag){     document.getElementById('res').value = '';     flag = true;    }    document.getElem
JAVASCRIPT实现简单计算器
weixin_33881753的博客
11-22 647
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;计算器&lt;/title&gt; &lt;style&gt; /*Basic reset*/ *
JavaScript写一个计算器
04-27
好的，以下是一个简单的JavaScript计算器示例： HTML代码： ```html <!DOCTYPE html> <html> <head> <title>计算器</title> </head> <body> <form name="calculator"> <input type="text" name="result" id="result" value="" /> <br /> <input type="button" value="1" onclick="calculator.result.value+='1'" /> <input type="button" value="2" onclick="calculator.result.value+='2'" /> <input type="button" value="3" onclick="calculator.result.value+='3'" /> <input type="button" value="+" onclick="calculator.result.value+='+'" /> <br /> <input type="button" value="4" onclick="calculator.result.value+='4'" /> <input type="button" value="5" onclick="calculator.result.value+='5'" /> <input type="button" value="6" onclick="calculator.result.value+='6'" /> <input type="button" value="-" onclick="calculator.result.value+='-'" /> <br /> <input type="button" value="7" onclick="calculator.result.value+='7'" /> <input type="button" value="8" onclick="calculator.result.value+='8'" /> <input type="button" value="9" onclick="calculator.result.value+='9'" /> <input type="button" value="*" onclick="calculator.result.value+='*'" /> <br /> <input type="button" value="c" onclick="calculator.result.value=''" /> <input type="button" value="0" onclick="calculator.result.value+='0'" /> <input type="button" value="=" onclick="calculator.result.value=eval(calculator.result.value)" /> <input type="button" value="/" onclick="calculator.result.value+='/'" /> </form> </body> </html> ``` JS代码： ```javascript // 禁用Enter键提交表单 document.onkeydown = function(event) { if (event.keyCode == 13) { return false; } } // 将数字和符号添加到计算器屏幕上 function addInput(input) { document.calculator.result.value += input; } // 清空计算器屏幕 function clearInput() { document.calculator.result.value = ""; } // 计算结果 function calculateResult() { try { var result = eval(document.calculator.result.value); document.calculator.result.value = result; } catch (error) { alert("输入有误，请重新输入！"); } } ``` 在HTML代码中，我们创建了一个表单，其中包含一个文本框用于显示计算结果，以及一些按钮用于添加数字和运算符。每个按钮都有一个 `onclick` 属性，当用户单击按钮时，将调用相应的 JavaScript 函数。 在JS代码中，我们定义了三个函数：`addInput()` 用于将数字和符号添加到计算器屏幕上，`clearInput()` 用于清空计算器屏幕，`calculateResult()` 用于计算结果并将其显示在计算器屏幕上。在 `calculateResult()` 函数中，我们使用 `try...catch` 语句来捕获用户可能输入的错误表达式，如果发生错误，我们将显示一个警告框提示用户重新输入。 这只是一个简单的计算器示例，如果你想进一步完善它，可以添加更多的功能和操作。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值