【通过html+css+js写一个计算器的功能】

搬砖老金牛

已于 2024-06-07 10:12:38 修改

阅读量160

点赞数 3

分类专栏： JavaScript 前端(html+css+javascript) 文章标签： javascript css html5

于 2024-06-04 10:41:04 首次发布

本文链接：https://blog.csdn.net/qq_48968230/article/details/139435959

版权

JavaScript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端(html+css+javascript)

3 篇文章 0 订阅

订阅专栏

效果图：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <style>
        td:hover {
            background-color: bisque; /* 颜色变深的效果 */
            transition: background-color 0.3s; /* 添加过渡效果 */
        }
    </style>
</head>
<body>
    <!-- cellspacing:单元格与单元格之间的距离;  cellpadding:单元格和文本之间的距离 -->
    <!-- beige米色 -->
    <table border="5" cellspacing="8" cellpadding="13" align="center" bgcolor="beige">
        <!-- 标题 -->
        <caption>计算器</caption>
        <!-- 第1行 -->
        <tr>
            <td colspan="4" align="left" height="18" bgcolor="bisque" id="result"></td>
        </tr>
        <!-- 第2行 -->
        <tr>
            <td align="center" style="width: 30px;" onclick="operate(this)">/</td>
            <td align="center" style="width: 30px;" onclick="getNumber(this)">(</td>
            <td align="center" style="width: 30px;" onclick="getNumber(this)">)</td>
            <td align="center" style="width: 30px;"  onclick="del()"><img src="./删除.png" alt=""></td>
        </tr>
        <!-- 第3行 -->
        <tr>
            <td align="center" onclick="getNumber(this)">7</td>
            <td align="center" onclick="getNumber(this)">8</td>
            <td align="center" onclick="getNumber(this)">9</td>
            <td align="center" onclick="operate(this)">*</td>
        </tr>
        <!-- 第4行 -->
        <tr>
            <td align="center" onclick="getNumber(this)">4</td>
            <td align="center" onclick="getNumber(this)">5</td>
            <td align="center" onclick="getNumber(this)">6</td>
            <td align="center" onclick="operate(this)">-</td>
        </tr>
        <!-- 第5行 -->
        <tr>
            <td align="center" onclick="getNumber(this)">1</td>
            <td align="center" onclick="getNumber(this)">2</td>
            <td align="center" onclick="getNumber(this)">3</td>
            <td align="center" onclick="operate(this)">+</td>
        </tr>
        <!-- 第6行 -->
        <tr>
            <td align="center" onclick="delAll()">C</td>
            <td align="center" onclick="getNumber(this)">0</td>
            <td align="center" onclick="getNumber(this)">.</td>
            <td align="center" onclick="equal(this)">=</td>
        </tr>
    </table>

    <script>
        let numArr = [];
        let result = document.getElementById('result');

        function delAll(){
            console.log('**********delAll**********');
            numArr = [];
            result.innerText = "";
        }

        function del(){
            numArr.pop();
            result.innerText = "=";
            numArr.forEach((item)=>{
                result.innerText += item;
            });
        }

        function operate(op){
            numArr.push(op.innerText);
            result.innerText = "=";
            numArr.forEach((item)=>{
                result.innerText += item;
            });
        }

        function getNumber(num){
            numArr.push(num.innerText);
            result.innerText = "=";
            numArr.forEach((item)=>{
                result.innerText += item;
            });
            console.log(numArr);
        }

        function equal(eq){
            let equation = "";
            numArr.forEach((item)=>{
                equation += item;
            });
            result.innerText = "=" + eval(equation);
            console.log(equation);
            console.log(result.innerText);
        }
    </script>
</body>
</html>