jQuery制作一个精致计算器

最新推荐文章于 2024-04-30 16:57:21 发布

Brian_ZXX

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量688

点赞数 2

分类专栏：基础学习文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/sunygoal/article/details/127688587

版权

基础学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.首先建立界面

<body>
    <div id="main">
        <input type="text" name="" id="input" disabled class="shownum">
        <div id="nums">
            <table border="0" width="300px" align="center" >

                <tr>
                    <td><button class="num" onclick="shu(1)" onkeydown="shu(1)">1</button></td>
                    <td><button class="num" onclick="shu(2)">2</button></td>
                    <td><button class="num" onclick="shu(3)">3</button></td>
                    <td><button class="op" onclick="shu('+')">+</button></td>
                </tr>
                <tr>
                    <td><button class="num" onclick="shu(4)">4</button></td>
                    <td><button class="num" onclick="shu(5)">5</button></td>
                    <td><button class="num" onclick="shu(6)"> 6</button></td>
                    <td><button class="op" onclick="shu('-')">-</button></td>
                </tr>
                <tr>
                    <td><button class="num" onclick="shu(7)">7</button></td>
                    <td><button class="num" onclick="shu(8)">8</button></td>
                    <td><button class="num" onclick="shu(9)">9</button></td>
                    <td><button class="op" onclick="shu('*')">*</button></td>
                </tr>
                <tr>
                    <td><button class="num" onclick="shu(0)">0</button></td>
                    <td ><button class="num" onclick="shu('.')">.</button></td>
                    <td><button id="delectbtn" onclick="delect()">X</button></td>
                    <td><button class="op" onclick="shu('/')">/</button></td>
                </tr>
                <tr>
                    <td><button id="clearbtn" onclick="qing()">清除</button></td>
                    <td><button id="recordbtn" onclick="jilu()">记录</button></td>
                    <td colspan="2" ><button id="computebtn" onclick="suan()">=</button></td>
                    <!-- <td colspan="3" style="color: ffffff;">历史记录：<input type="text" name="" id="show" disabled ></td> -->
                </tr>
            </table>
            <div class="recordshow" id="recordshow">
                <p id="record1"></p>
            </div>
        </div>
    </div>
</body>

2.加上样式

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js">

    </script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #main {
            margin-left: 35%;
            margin-top: 30px;
            width: 480px;
            height: 680px;
            background-color: rgb(0, 0, 0);
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 20px;
        }

        .shownum {
            width: 400px;
            height: 60px;
            margin: 30px;
            font-size: 32px;
            font-weight: 600;
            background-color: rgb(255, 255, 255);
            border-radius: 10px;
        }

        button {
            width: 100px;
            height: 100px;
            font-size: 25px;
            text-align: center;
            line-height: 100px;
            border-radius: 5px;
            background-color: aliceblue;

        }
        button:hover{
            background-color: rgb(195, 201, 206);
        }
        #computebtn{
            width: 205px;
        }
        #show{
            width: 300px;
            height: 50px;
            margin: 10px;
            font-size: 18px;
            font-weight: 600;
            background-color: aliceblue;
        }
        .recordshow{
            width: 310px;
            height: 410px;
            position: absolute;
            top: 150px;
            background-color: aliceblue;
            display: none;
            border-radius: 10px;
            font-size: 32px;
            font-weight: 600;
            word-wrap: break-word;
            word-break: normal;
            color: rgb(220, 66, 66);
        }
    </style>
</head>

3.加入jQuery代码

<script> 
    const i = [];
    var bot = false
    //点击什么按钮就会将对应按钮代表的值显示在input内
    function shu(s) {
    	//判断屏幕是否自动清屏
        if(bot == true){
        $("#input").val(" ");
        bot = false
        }
        $("#input").val($("#input").val() + s);    }
     //点击删除按钮就会将显示在input内的值删除一个
     function delect() {
        $("#input").val($("#input").val().substring(0,$("#input").val().length-1));
    }
    //当点击计算按钮的时候，将表单内value的值进行计算
    function suan() {
        console.log($("#input").val())
        var input = $("#input").val()
        $("#input").val(eval($("#input").val()))
        i.push((input + "=" +$("#input").val()) + "<br/>" )
        $("#recordshow").html(i) 
        bot = true
        console.log(bot)        
    }
    //当点击清除按钮的时候将input的内容清空
    function qing() {
        $("#input").val(" ");
    }
     //当点击记录按钮的时候将input的记录结果内容显示
     function jilu() {        
        $("#recordshow").toggle();          
    }
</script>