JavaScript 一个简易计算器（实现两个数的加、减、乘、除）

已于 2022-05-19 12:33:06 修改
阅读量2.7k 收藏 21
点赞数 5
文章标签： javascript html css 前端
于 2022-05-17 21:55:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45901736/article/details/124830968
版权 

  <style>
        div {
            height: 250px;
            width: 500px;
            margin: 50px 500px;
            background-color: rgb(155, 155, 155);
            border: 3PX solid blacK;
        }

        h3 {
            display: inline-block;
            margin-top: 30px;
            margin-left: 30px;
        }

        input {
            width: 80px;
            height: 40px;
            border-radius: 8px 8px 8px 8px;
        }

        button {

            width: 50px;
            height: 50px;
            margin-left: 50px;
            margin-top: 40px;
            font-size: 30px;
            background-color: rgb(255, 159, 159);
        }

        .btn:hover {
            color: blue;
        }

        .result {
            margin-left: 150px;
        }
    </style>

<script>
        function cal(type) {
            var obj1 = document.getElementById('num1');
            var obj2 = document.getElementById('num2');
            switch (type) {
                case '+':
                    var result = parseInt(obj1.value) + parseInt(obj2.value);
                    break;
                case '-':
                    var result = parseInt(obj1.value) - parseInt(obj2.value);
                    break;
                case '*':
                    var result = parseInt(obj1.value) * parseInt(obj2.value);
                    break;
                case '/':
                    var result = parseInt(obj1.value) / parseInt(obj2.value);
                    break;

            }
            var resultobj = document.getElementById('resultid');
            resultobj.value = result;
        }
        cal();
    </script>


<body>
    <div>
        <h3>number1:</h3><input type="test" value="" id="num1">
        <h3>number2:</h3><input type="test" value="" id="num2"><br>
        <button onclick="cal('+')" class="btn">+</button>
        <button onclick="cal('-')" class="btn">-</button>
        <button onclick="cal('*')" class="btn">*</button>
        <button onclick="cal('/')" class="btn">/</button><br>
        <h3 class="result">result:</h3><input type="test" id="resultid" value="">
    </div>
</body>

*做加法

*做减法

*做乘法

*做除法

JavaScript做加减乘除

HOROSHI
关注
  • 5
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用JS完成一个简单的计算器功能
chuisiqin5881的博客
05-08 2542
<!DOCTYPEhtml> <html> <head> <title>事件</title> <scripttype="text/javascript"> functioncount(){ ...
JS|pink老师 —— 使用构造函数写一个简易计算器
qq_56349925的博客
05-13 971
题目描述： 要求使用构造函数方法。 代码： var flag = true while(flag){ choice = parseInt(prompt('欢迎使用简易计算器：\n1.加法运算\n2.减法运算\n3.乘法运算\n4.除法运算\n5.退出\n请输入您的选项：')) if (choice == 5){ break } num1 = prompt('请输入第一个操作数：') num2 = prompt('请输入第二个操作数：') v
超级简易的JS计算器实例讲解(实现加减乘除)
10-19
下面小编就为大家带来一篇超级简易的JS计算器实例讲解(实现加减乘除)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
用javascript做简单计算器
10-10
用javascript做简单计算器，实现加减乘除的简单运算。
如何运用JavaScript中的函数做出一个简易计算器呢？
weixin_70747888的博客
03-21 2147
使用JS的函数功能，制作一个简易的计算器，包括加、减、乘、除的功能。输入任意操作数，使用函数传参的方式完成计算器的功能。这就是利用JS中的函数做出的很简易的一个计算器的效果，各位小伙伴快去试试吧！
JavaScript 计算器实现加减乘除
qq_44813023的博客
04-20 863
JavaScript 计算器实现加减乘除 JavaScript 计算器实现加减乘除 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算器</title> </head> <body> 数字一:<input ...
JavaScript实现简易计算器小功能
01-21
本文实例为大家分享了JavaScript实现简易计算器的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>计算器</title> &...
javascript实现简易计算器功能
01-18
本文实例为大家分享了javascript实现简易计算器的具体代码，供大家参考，具体内容如下 功能： 1、实现单击数字按钮输入数字 2、实现基础四则运算功能，并添加必要的异常处理，例如：除数不能为零 3、实现小数点添加...
用uniapp实现一个简单的计算器
06-08
- 实现计算功能，如加、减、乘、除，以及清除、等于等操作 - 更新显示区域的内容，根据运算状态显示输入值、运算符和结果 JavaScript部分可能涉及以下知识点： - Vue的响应式数据绑定：如`data`属性、`v-model`...
javascript实现简易计算器
10-20
本文将详细介绍如何使用纯JavaScript实现一个基本的加减乘除计算器。 首先，我们需要创建一个HTML结构来展示计算器的界面。HTML部分包括两个输入框（`<input type='text' id='txt1'/>` 和 `...
1.5 用JS实现简易计算器的加减乘除功能
小脆筒style的博客
04-12 2943
JS实现简易计算器 背景 设计一个简易计算器，具有能对两个操作数进行加、减、乘、除运算的简易计算器。需要正确的设计Web前端页面，能正确进行数据类型的转换，能正确使用选择结构，在JavaScript中定义函数，通过按钮事件调用定义好的JavaScript函数。 设计页面 使用合适的开发工具，设计计算器的页面 先把 01.jpg 和 02.jpg 图片下载下来放在同一层目录下 01.jpg 02.jpg 代码实现 1. index.html页面 <!DOCTYPE html> <ht
编写一个JavaScript小案例，实现一个简单的计算器。这个计算器可以进行加、减、乘、除四则运算。
xiaoguo111222的博客
04-03 927
清除计算器
用js做一个很简易的计算器
FYANGFEI的博客
09-22 3334
效果图 代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> 操作数1：<input ...
Javascript浮点数运算及比较代码收集整理
weixin_34413065的博客
10-29 204
2019独角兽企业重金招聘Python工程师标准>>> ...
用javascript制作简易计算器,用js做一个计算器代码
最新发布
神经网络爱好者
11-15 587
虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支 持JavaScript脚本语言，JavaScript已被大多数的浏览器所支持。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。
JavaScript创建一个函数，实现两个数之间的加减乘除运算，并将结果输出。
weiyindan的博客
01-02 7119
<script> var num1 = prompt('请输入第一个数字'); var str = prompt('请输入一个加减乘除的符号'); var num2 = prompt('请输入第二个数字'); function getNum(num1, num2) { return [parseInt(num1) + parseInt(num2), num1 - num2, num1 * num2, n..
JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。...
weixin_30241919的博客
06-14 1318
编程练习 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。 提示：获取元素的值设置和获取方法为：例：赋值：document.getElementById(“id”）.value = 1； 取值：var = document.getElementById(“id”）.value； 任务 ...
js中用户自定义对象，用弹框实现加减乘除的便利运算，js常用对象
m0_73646715的博客
09-19 349
使用object构造对象，//使用function创建对象，判断邮箱格式是否正确，字符串对象常用方法，加减乘除的运算
使用js实现加减乘除算法封装函数代码
徊忆羽菲
10-12 1010
使用js实现加减乘除算法封装函数代码具体代码 具体代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="js/bootstrap-3.3.0-dist/dist/css/bootstrap.min.css"/> <script type="t
5. 制作一个简易计算器，创建一个Counter构造函数实现加减乘除
11-04
这里提供两种实现简易计算器的方法： 方法一： ```javascript // 创建一个Caculator构造函数 function Caculator(num1, num2){ // 加法运算 this.add = function(){ return num1 + num2; } // 减法运算 this.sub = function(){ return num1 - num2; } // 乘法运算 this.mul = function(){ return num1 * num2; } // 除法运算 this.div = function(){ return num1 / num2; } } // 使用构造函数方法实现简易计算器 var flag = true; while(flag){ choice = parseInt(prompt('欢迎使用简易计算器：\n1.加法运算\n2.减法运算\n3.乘法运算\n4.除法运算\n5.退出\n请输入您的选项：')); if (choice == 5){ break; } num1 = prompt('请输入第一个操作数：'); num2 = prompt('请输入第二个操作数：'); var cal = new Caculator(parseInt(num1),parseInt(num2)); switch(choice){ case 1: alert(cal.add()); break; case 2: alert(cal.sub()); break; case 3: alert(cal.mul()); break; case 4: alert(cal.div()); break; case 5: flag = false; break; } } ``` 方法二： ```html <!-- HTML代码 --> <input type="text" id="num1"> <select id="operator"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" id="num2"> <button onclick="cal()">计算</button> <input type="text" id="resultid"> <!-- JavaScript代码 --> <script> function cal() { var obj1 = document.getElementById('num1'); var obj2 = document.getElementById('num2'); var operator = document.getElementById('operator').value; switch (operator) { case '+': var result = parseInt(obj1.value) + parseInt(obj2.value); break; case '-': var result = parseInt(obj1.value) - parseInt(obj2.value); break; case '*': var result = parseInt(obj1.value) * parseInt(obj2.value); break; case '/': var result = parseInt(obj1.value) / parseInt(obj2.value); break; } var resultobj = document.getElementById('resultid'); resultobj.value = result; } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值