jQuery制作简易计算器

最新推荐文章于 2023-09-11 17:52:39 发布

纵稚

最新推荐文章于 2023-09-11 17:52:39 发布

阅读量1.4k

点赞数 3

分类专栏： Jquery简易计算器文章标签： Jquery 计算器简单

本文链接：https://blog.csdn.net/Q2650173384/article/details/101050499

版权

Jquery简易计算器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery制作一个简易计算器

页面效果:
在这里插入图片描述

源码

第一次写博客…

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        #all {
            width: 600px;
            margin: 0px auto;
            background-color: deepskyblue;
            height: 400px;
            padding-top: 20px;
        }

        #myCal {
            width: 500px;
            height: 300px;
            margin: 0px auto;
        }

        table {
            border-collapse: collapse;
            text-align: center;
        }

        td {
            border: 1px solid white;
        }

        button {
            width: 96px;
            height: 40px;
            font-size: 26px;
            font-family: "宋体";
            color: navy;
            background-color:white;
        }
    </style>
    <script src="js/jquery-1.8.2.min.js"></script>
    <script>
        var Num1 = "";  //存放数字1
        var Num2 = "";  //存放数字2
        var Char = "";  //存放运算符
        var Result = "";//存放结果
        $(function () {//页面加载时绑定事件
            $("button").hover(function () {
                $(this).css({"background-color":"orange","color":"white"});//鼠标悬停时更改背景颜色与字体颜色
            }, function () {
                $(this).css({ "background-color": "white", "color": "navy" });
            });
            //给运算符添加点击事件
            $('.char').click(function () {
                if (Num2 == "") {
                    Char = $(this).text();
                    $('#content').val(Num1 + Char);
                } else if(Num2!="") {
                    switch (Char) {//当Num2存在时 代表两个数字已存在,并点了一个新运算符  则直接进行运算
                        case "+":
                            Result = parseFloat(Num1) + parseFloat(Num2);
                            break;
                        case "-":
                            Result = parseFloat(Num1) - parseFloat(Num2);
                            break;
                        case "*":
                            Result = parseFloat(Num1) * parseFloat(Num2);
                            break;
                        case "/":
                            Result = parseFloat(Num1) / parseFloat(Num2);
                            break;
                    }
                    Num2 = "";//清空Num2的值
                    Num1 = Result;//将结果的值赋值给Num1
                    Char = $(this).text();//更新下一次点击 的运算符
                    $('#content').val(Num1 + Char);//将更新完的运算符 和结果一起拼接到文本框中
                }

            });

            //给数字添加点击事件
            $('.num').click(function () {
                var txt = $(this).text();//拿到当前点击的数字按钮
                if (Char == "") {//如果运算符为空 则代表第一次点击 或者点击了等于号 
                    if (Result != Num1) {//如果Result!=Num1 则代表 没有点击=号
                        Num1 = Num1 + txt;//正常拼接
                        $('#content').val(Num1);//显示
                    } else {//点击了=号
                        Num1 = "";//清空Num1值  以免 等于号计算出的结果直接拼接了新的值
                        Num1 = Num1 + txt;//拼接新的输入值
                        $('#content').val(Num1);//显示
                    }
                }else {
                    Num2 = Num2 + txt;//如果运算符已存在 则输入的是第二个数
                    $('#content').val(Num1 + Char + Num2);//拼接
                }
            });
            $(".clear").click(function () {//归零按钮 清空所有值 并将输入框按钮的值还原成0 
                Num1 = "";
                Num2 = "";
                Char = "";
                Result = "";
                $('#content').val("0");
            });
            $(".result").click(function () {
                switch (Char) {//做一个判断，不同的运算符做不同的运算
                    case "+":
                        Result = parseFloat(Num1) + parseFloat(Num2);
                        break;
                    case "-":
                        Result = parseFloat(Num1) - parseFloat(Num2);
                        break;
                    case "*":
                        Result = parseFloat(Num1) * parseFloat(Num2);
                        break;
                    case "/":
                        Result = parseFloat(Num1) / parseFloat(Num2);
                        break;
                }
                $('#content').val(Result);
                Num1 = Result;//将计算结果赋值给Num1
                Char = "";//在这里清空原有的运算符 以跟直接点击+-/*运算符区分开
                Num2 = "";//清空Num2的值
            });
        });
    </script>
</head>
<body>
    <div id="all">
        <div id="myCal">
            <div style="margin:auto;text-align:center;font-size:20px;font-family:'宋体';color:navy'">jQuery简易计算器</div>
            <table style="margin-top:20px;">
                <tr>
                    <td colspan="4"><input id="content" value="0" style="height:40px;width:490px;font-size:30px;color:blue;font-family:'宋体';text-align:right" /></td>
                </tr>
                <tr>
                    <td><button class="num">7</button></td>
                    <td><button class="num">8</button></td>
                    <td><button class="num">9</button></td>
                    <td><button class="char">+</button></td>
                </tr>
                <tr>
                    <td><button class="num">4</button></td>
                    <td><button class="num">5</button></td>
                    <td><button class="num">6</button></td>
                    <td><button class="char">-</button></td>
                </tr>
                <tr>
                    <td><button class="num">1</button></td>
                    <td><button class="num">2</button></td>
                    <td><button class="num">3</button></td>
                    <td><button class="char">*</button></td>
                </tr>
                <tr>
                    <td><button class="num">0</button></td>
                    <td><button class="clear">C</button></td>
                    <td><button class="char">/</button></td>
                    <td><button class="result">=</button></td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

纵稚

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
jQuery制作简易计算器

jQuery制作一个简易计算器页面效果:源码第一次写博客…<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> &l...
复制链接

扫一扫