利用javaScript实现简单的计算器

最新推荐文章于 2024-04-25 09:54:19 发布

几人憔悴几人泪

最新推荐文章于 2024-04-25 09:54:19 发布

阅读量2.1k

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/qq_27717967/article/details/52589105

版权

javaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先上个效果图：

思路：使用一个total的全局变量来保存累计的结果，flagNew来标记是否是新输入的操作数，opp来存运算符

(1) function $(id) 函数返回通过id获取元素，简化以后使用document.getRlementById()

(2) function clearAll() 函数主要实现的就是让total归零，也就是C按钮的作用

(3) function enterNumber(Num) 函数用于记录输入的数，如果一直输入的是0，就显示为0，否则一直把值以字符的形式向后加

(4) function operation(op) 函数来根据opp('+'、'-'、'*'、'/')来计算值，然后更新total，并显示在界面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易的计算器</title>
    <style>

        body{
            background-color: #99ccff;
        }
        table{
            border-left: 1px solid #ffffff ;
            border-top: 1px solid #ffffff ;
        }
        .inputBox{
            border-top: 1px solid  #000000;
            border-left: 1px solid #000000;
            border-right: 1px solid #FFFFFF;

            width: 180px;
            background-color: #ffffff;
            text-align: right;
        }
        input{
            border-right: 1px solid #000000;
            border-top: 1px solid #ffffff;
            border-left: 1px solid #ffffff;
            color:#000080;
            background-color: #d8d8d0;
            width: 40px;
            height: 20px;
        }
        td{
            border-bottom: 1px solid #fff;
            border-right: 1px solid #fff;
            height: 25px;
        }
    </style>
</head>
<body>
<form action="" method="get" id="myform">
    <table width="180px" border="0" cellpadding="3" cellspacing="0" align="center">
        <tbody>
            <tr>
                <td colspan="4"><input type="text" id="number" class="inputBox" value="0"/> </td>
            </tr>
            <tr>
                <td><input type="button" value="7" onClick="enterNumber(7)" /></td>
                <td><input type="button" value="8" onClick="enterNumber(8)" /></td>
                <td><input type="button" value="9" onClick="enterNumber(9)" /></td>
                <td><input type="button" value="+" onClick="operation('+')" /></td>
            </tr>
            <tr>
                <td><input type="button" value="4" onClick="enterNumber(4)" /></td>
                <td><input type="button" value="5" onClick="enterNumber(5)" /></td>
                <td><input type="button" value="6" onClick="enterNumber(6)" /></td>
                <td><input type="button" value="-" onClick="operation('-')" /></td>
            </tr>
            <tr>
                <td><input type="button" value="1" onClick="enterNumber(1)" /></td>
                <td><input type="button" value="2" onClick="enterNumber(2)" /></td>
                <td><input type="button" value="3" onClick="enterNumber(3)" /></td>
                <td><input type="button" value="*" onClick="operation('*')" /></td>
            </tr>
            <tr>
                <td><input type="button" value="0" onClick="enterNumber(0)" /></td>
                <td><input type="button" value="C" onClick="clearAll();" /></td>
                <td><input type="button" value="/" onClick="operation('/')" /></td>
                <td><input type="button" value="=" onClick="operation('=')" /></td>
            </tr>
        </tbody>
    </table>
</form>
</body>
<script>
    var total = 0; //全局变量total，累计输入
    var flagNew = false; //是否是新的操作数（输入的第二个数）
    var opp = ""; //运算符变量
    function $(id){
        return document.getElementById(id);
    }
    //清除结果
    function clearAll(){
        total = 0;
        $("number").value = 0;
    }
    //数字按钮点击调用的函数，num表示输入的数字
    function enterNumber(Num){
        //判断是否输入新的操作数
        if(flagNew){
            $("number").value=Num;
            flagNew = false;
        }else {
            if ($("number").value == "0") {
                $("number").value = Num;
            } else {
                $("number").value += Num;
            }
        }
        //alert( document.getElementById("number").value);
    }
    //“加减乘除”按钮单击调用的函数，op代表运算符号
    function operation(op){
        var firstNum = $("number").value;
        flagNew = true;
        if(opp != "=") {
            //根据运算符计算
            if ('+' == opp) {
                total += parseFloat(firstNum);
            } else if ('-' == opp) {
                total -= parseFloat(firstNum);
            } else if ('*' == opp) {
                total *= parseFloat(firstNum);
            } else if ('/' == opp) {
                total /= parseFloat(firstNum);
            } else {
                total = parseFloat(firstNum);
            }
        }
        opp = op; //相当于先把符号传进来，然后在下一次调用的时候再用于计算
        $("number").value = total;
        //alert(total);
    }
</script>
</html>

几人憔悴几人泪

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
利用javaScript实现简单的计算器

先上个效果图：思路：使用一个total的全局变量来保存累计的结果，flagNew来标记是否是新输入的操作数，opp来存运算符(1) function $(id) 函数返回通过id获取元素，简化以后使用document.getRlementById()(2) function clearAll() 函数主要实现的就是让total归零，也就是C按钮的作用(3) function
复制链接

扫一扫