简易的 iPhone 计算器-JS、CSS、HTML

最新推荐文章于 2023-11-26 20:05:50 发布

web-小白白

最新推荐文章于 2023-11-26 20:05:50 发布

阅读量886

点赞数 1

分类专栏： JS 文章标签： js html

本文链接：https://blog.csdn.net/weixin_45030716/article/details/106504627

版权

JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在这里插入图片描述

HTML+CSS 布局

 如下图：

最外层使用div然后margin:auto;水平居中
显示用户框我用的也是一个div 属性：text-align:right;文本右对齐
table表格：5行4列加上 border-radius圆角属性

 <style>
        .panel {
            width: 270px;
            height: 400px;
            margin: auto;
            background-color: black;
            overflow: hidden;
        }

        .panel>div {
            height: 70px;
            width: 100%;
        }

        table {
            width: 270px;
            height: 300px;
            margin: auto;
            text-align: center;
        }

        table tr td {
            width: 20%;
            border-radius: 50%;
            cursor: pointer;
        }

        table tr:nth-last-child(1) td:nth-child(1){
            border-radius: 140px;
        }

        table tr:nth-child(1) td {
            background-color: #7c7c7c;
            color: #281622;
        }

        table tr td:nth-last-child(1) {
            background-color: #fc8e39;
            color: #fff;
        }

        table tr td {
            background-color: #2c2c2c;
            color: #fff;
        }

        .panel>div {
            color: #fff;
            font-size: 38px;
            margin-top: 30px;
            text-align: right;
        }
    </style>
    <body>
    <div class="panel">
        <div id="show"></div>
        <table border="0" cellspacing=8>
            <tr>
                <td οnclick="del()">del</td>
                <td οnclick="c()">C</td>
                <td οnclick="number(this)">%</td>
                <td οnclick="number(this)">/</td>
            </tr>
            <tr>
                <td οnclick="number(this)">7</td>
                <td οnclick="number(this)">8</td>
                <td οnclick="number(this)">9</td>
                <td οnclick="number(this)">*</td>
            </tr>
            <tr>
                <td οnclick="number(this)">4</td>
                <td οnclick="number(this)">5</td>
                <td οnclick="number(this)">6</td>
                <td οnclick="number(this)">-</td>
            </tr>
            <tr>
                <td οnclick="number(this)">1</td>
                <td οnclick="number(this)">2</td>
                <td οnclick="number(this)">3</td>
                <td οnclick="number(this)">+</td>
            </tr>
            <tr>
                <td colspan="2" οnclick="number(this)">0</td>
                <td οnclick="number(this)">.</td>
                <td οnclick="calculate()">=</td>
            </tr>
        </table>
    </div>
    </body>

JS 代码

由于JS代码没有多少且有注释，这里就不详细介绍了。

<script>
        // 获取显示框
        var show = document.getElementById('show');

        // 获取用户输入的数字，并显示
        function number(a) {
            show.innerText += a.innerText;
        }

        // 运算函数
        // 思路：1.判断显示框是否为空
        //      2.使用 eval(); 输出用户输入的算数
        function calculate() {
            show.innerText = show.innerText == "" ? "" : eval(show.innerText);
        }

        // 删除全部 del 函数
        function del() {
            show.innerText = "";
        }
        // 删除最后一位
        function c() {
            show.innerText = show.innerText.slice(0, show.innerText.length - 1);
        }
    </script>