[JS]实现简单的计算器

Web js

创建时间:2019-10-07 21:49

字数:266 阅读:

通过获取两个文本的值，判断选择的运算符，根据运算符的不同，分别进行计算。

<%--
  Created by IntelliJ IDEA.
  User: 小信
  Date: 2018/8/25
  Time: 18:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
</head>
<style>
    input{
        font-size:1.4em;
        width: 80px;
        border-radius:4px;
        border:1px solid #c8cccf;
        color:#6a6f77;
    }
</style>
<script type="text/javascript">
    function add() {
        var sum;
        var num1 = parseInt(document.getElementById("num1").value);
        var num2 = parseInt(document.getElementById("num2").value);
        var symbol = document.getElementById("symbol").value;
        switch (symbol) {
            case '+':
                sum = num1 + num2;
                break;
            case '-':
                sum = num1 - num2;
                break;
            case '*':
                sum = num1 * num2;
                break;
            case '/':
                sum = num1 / num2;
                break;
        }
        document.getElementById("num3").value = sum;
    }
</script>
<body>
<form>
    <input type="text" id="num1" value="">
    <select id="symbol">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" id="num2" value="">=
    <input type="text" id="num3" value="">
    <input type="button" value="计算" onclick="add()">
    <input type="reset" name="ret" value="清空">
</form>
</body>
</html>

样式如下

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 xiaoxin1218@qq.com