[JS]实现简单的计算器

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

<%--
  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

文章标题:[JS]实现简单的计算器

文章字数:266

本文作者:周信

发布时间:2019-10-07, 21:49:25

最后更新:2023-05-03, 10:25:35

原始链接:http://zx21.xyz/2019/10/07/JS-实现简单的计算器/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

可为我打赏鼓励~