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

一、计算方式

计算过程利用下拉菜单进行选择运算方式,输入方式则是输入到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>

二、展示结果

在这里插入图片描述
利用HTML和javaScript实现简单的加减乘除运算_第1张图片
在这里插入图片描述

你可能感兴趣的:(利用HTML和javaScript实现简单的加减乘除运算)