给大家分享一个好玩的用CSS+JS写一个简单的计算器

本文链接：https://blog.csdn.net/zfy980829/article/details/107213132

本文介绍如何利用CSS和JavaScript创建一个简单的计算器。通过使用HTML的table元素为按键绑定点击事件，结合CSS美化界面，并用JS实现基本的数学运算功能，包括加、减、乘、除和清除操作。文章提供了实现过程及最终效果展示。

摘要由CSDN通过智能技术生成

如何用CSS+JS做一个简单的计算器？
觉得不错的，麻烦点个赞哦！！！
不废话，咱们直接开始

<div id="bg">
        <div id="screen"></div>
        <table>
            <tr>
                <td>
                    <div class="btn_grey" onclick="del()">del</div>
                </td>
                <td>
                    <div class="btn_grey" onclick="cfun()">C</div>
                </td>
                <td>
                    <div class="btn_grey" onclick="func('%')">%</div>
                </td>
                <td>
                    <div class="btn_orange" onclick="func('/')">/</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="btn" onclick="func('7')">7</div>
                </td>
                <td>
                    <div class="btn" onclick="func('8')">8</div>
                </td>
                <td>
                    <div class="btn" onclick="func('9')">9</div>
                </td>
                <td>
                    <div class="btn_orange" onclick="func('*')">*</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="btn" onclick="func('4')">4</div>
                </td>
                <td>
                    <div class="btn" onclick="func('5')">5</div>
                </td>
                <td>
                    <div class="btn" onclick="func('6')">6</div>
                </td>
                <td>
                    <div class="btn_orange" onclick="func('-')">-</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="btn" onclick="func('1')">1</div>
                </td>
                <td>
                    <div class="btn" onclick="func('2')">2</div>
                </td>
                <td>
                    <div class="btn" onclick="func('3')">3</div>
                </td>
                <td>
                    <div class="btn_orange" onclick="func('+')">+</div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="btn" onclick="func('0')" id="zero">0</div>
                </td>
                <td>
                    <div class="btn" onclick="func('.')">.</div>
                </td>
                <td>
                    <div class="btn_orange" onclick="result()">=</div>
                </td>
            </tr>
        </table>
    </div>

这里用table生成每个按键绑定点击事件
数字运算符号功能键不要弄错了
接下来就是添加样式和JS了

#bg{
        width: 250px;
        height: 400px;
        background: #111111;
        margin: auto;
    }
    #screen{
        width: 95%;
        height: 70px;
        text-align: right;
        font-size: 50px;
        position: relative;
        top: 5px;
        margin-left: 5px;
        color: white;
    }
    .btn,
    .btn_grey,
    .btn_orange{
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border-radius: 25px;
        font-size: 16px;
        color: white;
        margin: 3px;
        cursor: pointer;
    }
    .btn_grey{
        background: grey;
    }
    .btn_orange{
        background: orange;
    }
    .btn{
        background: #2c2c2c;
    }
    #zero{
        width: 110px;
    }

给界面添加样式让界面美观一点，然后就是一些简单的JS代码了

var src = document.getElementById('screen')
            //清除
        function del() {
            //清空
            src.innerHTML = ""
        }
        //次清除一个
        function cfun() {
            var str = src.innerHTML
            src.innerHTML = str.slice(0, str.length - 1)
        }
        //运算
        function func(num) {
            var str = src.innerHTML
            src.innerHTML = str + num
        }
        function result() {
            var str = src.innerHTML
            src.innerHTML = str == "" ? "" : eval(str)
        }