利用HTML和javaScript实现简单的加减乘除运算

最新推荐文章于 2024-05-09 21:46:33 发布
最新推荐文章于 2024-05-09 21:46:33 发布
阅读量1.5w 收藏 103
点赞数 25
文章标签： javascript html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_CSHY/article/details/105079856
版权

一、计算方式

计算过程利用下拉菜单进行选择运算方式，输入方式则是输入到from表单的文本框中，代码分为JavaScriptt部分和HTML部分。

二、代码段

（一）JavaScript部分

<script type="text/javascript">
    function calc() {
        var oper1=document.getElementById("num1");//获取输入数据1
        var oper2=document.getElementById("num2");//获取输入数据2
        var o=document.getElementById("operator");//获取下拉了列表
        var op=o.options[o.selectedIndex].value;//在下拉列表中选中选择的值
        var res;
        //根据选项进行加减乘除运算
        switch (op) {
            case "+":
                res=change(oper1.value)+change(oper2.value);
                break;
            case "-":
                res=change(oper1.value)-change(oper2.value);
                break;
            case "*":
                res=change(oper1.value)*change(oper2.value);
                break;
            case "/":
                res=change(oper1.value)/change(oper2.value);
                break;

        }

        document.getElementById("anw").value=res;//将运算结果赋值到所设置好的anw文本框中

    }
    //因为在文本框中获取的数据是文本格式要转换成数字格式，利用自带函数paseFloat
    function change(x) {
        return parseFloat(x);

    }
</script>avascript

（二）HTML部分

<form action="">
<input type="text" id="num1" placeholder="数据1">
<select id="operator">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="*">*</option>
</select>
<input type="text" id="num2" placeholder="数据2">
=
<input type="text" placeholder="答案" id="anw">
<input type="button" value="计算" onclick="calc()">
</form>

（三）结合总体部分

// 这是总体的部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <!--javascript部分-->
    <script type="text/javascript">
    function calc() {
        var oper1=document.getElementById("num1");//获取输入数据1
        var oper2=document.getElementById("num2");//获取输入数据2
        var o=document.getElementById("operator");//获取下拉了列表
        var op=o.options[o.selectedIndex].value;//在下拉列表中选中选择的值
        var res;
        //根据选项进行加减乘除运算
        switch (op) {
            case "+":
                res=change(oper1.value)+change(oper2.value);
                break;
            case "-":
                res=change(oper1.value)-change(oper2.value);
                break;
            case "*":
                res=change(oper1.value)*change(oper2.value);
                break;
            case "/":
                res=change(oper1.value)/change(oper2.value);
                break;

        }

        document.getElementById("anw").value=res;//将运算结果赋值到所设置好的anw文本框中

    }
    //因为在文本框中获取的数据是文本格式要转换成数字格式，利用自带函数paseFloat
    function change(x) {
        return parseFloat(x);

    }
</script>
    <!--HTML部分-->
</head>
<body>
<form action="">
<input type="text" id="num1" placeholder="数据1">
<select id="operator">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
</select>
<input type="text" id="num2" placeholder="数据2">
=
<input type="text" placeholder="答案" id="anw">
<input type="button" value="计算" onclick="calc()">
</form>
</body>
</html>

二、展示结果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Mr_CSHY
关注
  • 25
    点赞
  • 踩
  • 103
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML计算器实现加减乘除
08-14
HTML编写简单的计算器实现加减乘除
小学生作业随机加减乘除运算计算习题答案html源码.zip
04-12
该压缩包文件“小学生作业随机加减乘除运算计算习题答案html源码.zip”包含的是一个用于小学生作业练习的HTML源代码。这个源码设计的目的主要是帮助小学生进行加减乘除的基础运算训练，随机生成习题以增加学习的趣味...
html页面做加法计算,网页计算器简单实现加减乘除功能
weixin_39933713的博客
06-04 3263
网页计算器整数1：整数2：结果：function calc(func){var result = document.getElementById(‘result‘);var num1 = parseInt(document.getElementById(‘num1‘).value);var num2 = parseInt(document.getElementById(‘num2‘).value)...
java-通过JFrame类实现简易计算器 ：加减乘除
最新发布
xinsuiyu123的博客
05-09 177
【代码】java-通过窗口实现简易计算器。
HTML实现加减乘除的计算器+JavaScrip小知识点
全栈
04-15 6870
下面是一些小的知识点，可以看看，网页的计算机代码在下面，小伙伴们花点耐心， 1、form表单 form提交数据 提交方式有两种：action提交路径，mothod提交方式 提交方式有两种：get显示数据，post隐藏数据， input：属性 name起名字，id唯一，checked单选框选中，selected下拉框选中，select下拉框，option列表选项，textarea文本域，text文本框，password密码框，radio单选按钮，CheckBox多选框，submit提交...
Html实现简单的四则运算--加减乘除计算(单选框默认选择)
程序羊的博客
09-25 7551
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scal...
html中计算乘积,计算R中所有组合的乘积
weixin_39781186的博客
06-26 256
列表a如下：一个< -list(3：6,6：8,3：4,8)> a[[1]][1] 3 4 5 6[[2]][1] 6 7 8[[3]][1] 3 4[[4]][1] 8我的目标是计算每个对象中所有2元素组合的所有产品.例如,a中的第一个对象是3 4 5 6,因此第一个对象的所有乘积都是12 15 18 20 24 30,第二个对象的所有乘积都是42 48 56.但是当只有一个元素时在...
算数验证码识别（运算符为中文：加、减、乘）
huagangwang的专栏
07-07 4802
算数验证码识别，中文运算符
HTML程序大全(1)：简易计算器
joe_g12345的博客
12-05 2714
这是一个简单的计算器，使用HTML、CSS和JavaScript实现。HTML代码创建了一个计算器的界面，CSS代码设置了计算器的样式，JavaScript代码实现了计算器的功能。这个计算器可以执行加、减、乘、除和取模运算。同时，它还支持小数点和多位数运算。
html+css+js实现简易计算器
热门推荐
weixin_45118138的博客
05-02 1万+
使用JavaScript制作一个简单的计算器 直接看效果，这个计算器可以实现简单的加减乘除 1、首先编辑HTML样式，把计算机上的按键全部打印出来 可以显示出以下结果 2、添加css样式 先设置a元素定宽定高，然后左浮动，在微调宽度和高度，使其到达一个合理布局的值 3、编写js代码 写一个for循环，不断接收a点击事件。 编写点击result，点击清零。 3. 点击数字，获取num1和num2的值。 4.获取按键加减乘除，记录下符号 5....
html实现计算器源码
xcLeigh
11-21 1854
html实现计算器源码，计算器源码，简易计算器功能实现，加减乘除，平方，根号等基本算数功能实现，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
加法计算器.html
03-22
用JS写的一个加法计算器，是初学者用来做借鉴的东西。该文档只提供了加法计算功能，可以在上面惊醒更多的额外附加。
HTML计算器_html记算器_html计算器_
10-03
简易的html计算器，可实现加减乘除和科学计算器功能。由于计算部分使用JavaScript原生四则运算，所以精度不可靠。
超级简易的JS计算器实例讲解(实现加减乘除)
10-19
在本文中，我们将深入探讨如何使用JavaScript实现一个简单的计算器，具备加、减、乘、除的基本功能。这个计算器实例简洁明了，非常适合初学者学习和理解JavaScript基础以及DOM操作。 首先，HTML部分创建了一个基本...
加减乘除的web页面
05-14
4. **加减乘除运算**：JavaScript提供了基本的数学运算符（+，-，*，/）来实现这些功能。例如，`result = num1 + num2` 对两个数进行相加操作，结果存储在`result`变量中。 5. **MyEclipse**：MyEclipse是一款集成...
vue + 计算器 实现 加减乘除
04-18
在本项目中，我们主要探讨如何使用Vue.js框架来实现一个基本的计算器功能，包括加、减、乘、除四种运算。Vue.js是一款轻量级的前端JavaScript框架，以其组件化开发模式、响应式数据绑定和易用性而受到开发者们的广泛...
使用HTML5、CSS3和JavaScript实现简易四则运算
04-26
在本项目中，我们将探讨如何使用HTML5、CSS3和JavaScript技术来创建一个简单的四则运算计算器。这个计算器能够执行基本的加法、减法、乘法和除法操作，对于初学者来说是一个很好的实践项目，它能帮助理解前端开发的...
html实现计算器
qq_46578318的博客
06-10 7704
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Calculator</title> </head> <style> *{ font-size:36px;} table{ background-color: thistle; } .
html输入两个数实现加减乘除功能
yunduanaoligei的博客
08-20 3878
在网页制作过程中制作一个简单计算器功能是非常常见的需求，通过在文本输入两个数，能够实现两个数的加减乘除，主要通过parseFloat() 函数，其语法介绍可以参考下本文 一、parseFloat() 函数 在网页中制作一个简单的计算器，在文本框输入两个数，能够实现两个数的加减乘除。 parseFloat() 函数可解析一个字符串，并返回一个浮点数。 该函数指定字符串中的首个字符是否是数字。如果是，则对字符 串进行解析，直到到达数字的末端为止，然后以数字返回该数字， 而不是作为字符串。 语法：parseFlo
利用Javascript或者Jquery实现两个数字加减乘除
07-08
你可以使用以下代码来实现两个数字的加减乘除运算： ```html <!DOCTYPE html> <html> <head> <title>数字运算</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h1>数字运算</h1> <label for="num1">输入第一个数字：</label> <input type="text" id="num1"> <br> <label for="num2">输入第二个数字：</label> <input type="text" id="num2"> <br> <button id="btnAdd">加</button> <button id="btnSubtract">减</button> <button id="btnMultiply">乘</button> <button id="btnDivide">除</button> <script> $(document).ready(function() { $('#btnAdd').click(function() { var num1 = parseFloat($('#num1').val()); var num2 = parseFloat($('#num2').val()); var result = num1 + num2; alert('结果为：' + result); }); $('#btnSubtract').click(function() { var num1 = parseFloat($('#num1').val()); var num2 = parseFloat($('#num2').val()); var result = num1 - num2; alert('结果为：' + result); }); $('#btnMultiply').click(function() { var num1 = parseFloat($('#num1').val()); var num2 = parseFloat($('#num2').val()); var result = num1 * num2; alert('结果为：' + result); }); $('#btnDivide').click(function() { var num1 = parseFloat($('#num1').val()); var num2 = parseFloat($('#num2').val()); if (num2 !== 0) { var result = num1 / num2; alert('结果为：' + result); } else { alert('除数不能为0！'); } }); }); </script> </body> </html> ``` 将上述代码保存为一个 HTML 文件并在浏览器中打开，您就可以在页面中输入两个数字，然后点击相应的按钮进行加减乘除运算，最后弹出一个对话框，显示运算结果。请注意，代码中使用`parseFloat()`函数将输入的值转换为浮点数，以确保正确的计算结果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值