基于jquery+html写的一个简易计算器

最新推荐文章于 2022-11-04 14:43:52 发布

iflycc

最新推荐文章于 2022-11-04 14:43:52 发布

阅读量471

点赞数

分类专栏：计算器文章标签： html+jquery实现计算器

本文链接：https://blog.csdn.net/iflycc/article/details/103365492

版权

计算器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基本上实现了普通计算器的大部分需求，临时随手编写，不喜勿喷呀~
贴代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单的计算器</title>
    <style>
        table{
            margin: 5% auto;
        }
        table tr td{
            width: 90px;
            height: 35px;
            text-align: center;
        }
        .head{
            height: 100px;
            text-align: right;
            border-radius: 7px;
            font-size: 20px;
            color: white;
            background-color: #a6a6a6;
        }
        td .sign {
            height: 25px;
            margin: 0 auto;
            vertical-align: middle;
            font-weight: bolder;
            font-size: 20px;
            background-color: #ff9323;
            color: white;
        }
        .sign,.zero,#sub,#backspace{
            background-color: #ff9323;
            color: white;
        }
        .number{
            background-color: #707070;
            color: white;
            font-size: large;
        }
        /*错误信息*/
        #error_msg{
            position: absolute;
            color: red;
            margin-left: 10.5%;
            margin-top: 3.5%;
        }
        h3{
            /*margin: 0 auto;*/
        }
        /*容器*/
        #calculator{
            margin: 5% auto;
            width: 40%;
            height: 450px;
            background-color: #d3d3d3;
            border-radius: 10px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div id="calculator">
        <div id="error_msg"></div>
        <h3>SixStar - 简易计算器</h3>
        <table>
            <tr >
                <td class="head" colspan="4">0</td>
            </tr>
            <tr>
                <td class="sign" >+</td>
                <td class="sign" >-</td>
                <td class="sign" >*</td>
                <td class="sign" >÷</td>
            </tr>
            <tr >
                <td class="number">7</td>
                <td class="number">8</td>
                <td class="number">9</td>
                <td id="backspace">←</td>

            </tr>
            <tr>
                <td class="number">4</td>
                <td class="number">5</td>
                <td class="number">6</td>
                <td class="zero">AC</td>

            </tr>
            <tr >
                <td class="number">1</td>
                <td class="number">2</td>
                <td class="number">3</td>
                <td id="sub" rowspan="2">=</td>
            </tr>
            <tr>
                <td class="number">0</td>
                <td  class="number" colspan="2">.</td>
            </tr>
        </table>
        <!--隐藏的input提交数据-->
        <input type="hidden" name="cal" value="">
    </div>

</body>
</html>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
    // 鼠标点击（数字键）按下 / 弹出事件
    var _numberObj = $(".number");
    _numberObj.mousedown(function () {
        $(this).css('background-color','#C2C2C2');
   });
    _numberObj.mouseup(function () {
       $(this).css('background-color','#707070');
   });

    // 鼠标点击事件（符号键） 按下弹出
    var _signObj = $(".sign,.zero,#backspace,#sub");
    _signObj.mousedown(function () {
        $(this).css('background-color','#ffb717');
    });
    _signObj.mouseup(function () {
        $(this).css('background-color','#ff9323');
    });

    // AC键清空数据
    $(".zero").click(function () {
        $("input[name='cal']").val("");
        $(".head").text(0);
    });

    // 点击 运算数字 or 运算符时
    $(".sign,.number").click(function () {
        var operateObj = $(".head");
        var operateVal = operateObj.text(); // 计算框中的内容
        operateVal = parseInt(operateVal) === 0 ? "" : operateVal;
        var newVal = $(this).text();
        newVal = newVal.toString() === "÷" ? "/" : newVal;
        var _resVal = operateVal + newVal;
        _resVal = _resVal.toString() === "" ? 0 : _resVal;
        operateObj.text(_resVal);
        $("input[name='cal']").val(_resVal);
    });

    // 点击退格
    $("#backspace").click(function () {
        var operateObj = $(".head");
        var operateVal = operateObj.text(); // 计算框中的内容
        // 删除最后一个字符
        var _subVal = operateVal.substr(0,operateVal.length -1);
        _subVal = _subVal.toString() === "" ? 0 : _subVal;
        operateObj.text(_subVal);
        $("input[name='cal']").val(_subVal);

    });

    // 点击 = 号，运算
    $("#sub").click(function () {
        var subData = $("input[name='cal']").val();
        try {
            var _result = eval(subData);
            $(".head").text(_result);
        }
        catch (e){
            var _errorMsg = $("#error_msg");
            _errorMsg.css('display',"block");
            _errorMsg.text("运算表达式错误");
            _errorMsg.fadeOut(2000); // 渐退
        }
    });

</script>