HTML+CSS+JS制作一个简单的计算器

最新推荐文章于 2024-06-10 22:16:06 发布

猿人小彭

最新推荐文章于 2024-06-10 22:16:06 发布

阅读量1.6k

点赞数 3

文章标签： html css js

本文链接：https://blog.csdn.net/qq_37415014/article/details/108682609

版权

用HTML+CSS+JS制作了一个简单的计算器，它的使用类似于生活中使用的计算器。暂时未发现有任何计算上的错误，有问题请联系我，谢谢。

最终成果图：

在这里插入图片描述

HTML代码块：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算器</title>
    <link rel="stylesheet" href="./css/normalize_14.css">
    <link rel="stylesheet" href="./css/calculator.css">
</head>

<body>
    <main>
        <table>
            <thead>
                <tr>
                    <th colspan="5">
                        <input type="text" class="result" disabled>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <button onclick="mC()">MC</button>
                    </td>
                    <td>
                        <button onclick="mAdd()">M+</button>
                    </td>
                    <td>
                        <button onclick="mSub()">M-</button>
                    </td>
                    <td>
                        <button onclick="mR()">MR</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button onclick="c()">C</button>
                    </td>
                    <td>
                        <button onclick="reverse()">±</button>
                    </td>
                    <td>
                        <button class="calculate" value="/">/</button>
                    </td>
                    <td>
                        <button class="calculate" value="*">*</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="calculate" value="7">7</button>
                    </td>
                    <td>
                        <button class="calculate" value="8">8</button>
                    </td>
                    <td>
                        <button class="calculate" value="9">9</button>
                    </td>
                    <td>
                        <button class="calculate" value="-">-</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="calculate" value="4">4</button>
                    </td>
                    <td>
                        <button class="calculate" value="5">5</button>
                    </td>
                    <td>
                        <button class="calculate" value="6">6</button>
                    </td>
                    <td>
                        <button class="calculate" value="+">+</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="calculate" value="1">1</button>
                    </td>
                    <td>
                        <button class="calculate" value="2">2</button>
                    </td>
                    <td>
                        <button class="calculate" value="3">3</button>
                    </td>
                    <td rowspan="2">
                        <button onclick="equal()">=</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <button class="calculate" value="0">0</button>
                    </td>
                    <td>
                        <button class="calculate" value=".">.</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </main>
    <script src="./js/jquery-2.1.4/jquery.min.js"></script>
    <script src="./js/calculator.js"></script>
</body>

</html>

CSS代码块：

@font-face {
    font-family: "digital";
    src: url(./../font/digital-7_mono.ttf);
}

main {
    background-color: #a6d79a;
    position: fixed;
    width: 100%;
    height: 100%;
}

main>table {
    margin: 50px auto;
    background-color: #f2f2f2;
    border-radius: 5px;
}

main>table>thead>tr>th>input {
    width: 450px;
    height: 60px;
    margin: 10px 0;
    border: 1px solid #eaeaea;
    background-color: #1c1c1c;
    color: white;
    font-family: "digital";
    text-align: right;
    font-size: 28px;
}

main>table>tbody>tr>td>button {
    width: 100px;
    height: 60px;
    margin: 10px;
    color: #3f3f3f;
    outline: none;
    background-color: #f4f4f4;
    border: 1px solid #eaeaea;
}

main>table>tbody>tr>td>button:active {
    border-color: #3f3f3f;
}

main>table>tbody>tr:nth-child(5)>td:nth-child(4)>button {
    width: 100px;
    height: 140px;
}

main>table>tbody>tr:nth-child(6)>td:nth-child(1)>button {
    width: 220px;
    height: 60px;
}

JS代码块：

let arr = [0]; //公式数组
let result = "";   //输入的数字

// 计算器计算
$(document).ready(function () {
    $(".result").val(0);
    $(".calculate").on("click", function () {
        let nums = $(this).val();      //通过按键输入
        if (!isNaN(nums) || nums == ".") {
            if (result == "" && nums == ".") {
                result = "0.";
            } else if(result == "0" && nums == "0") {
                result = "0";
            } else if(result == "0" && nums != "0" && nums != ".") {
                result = "";
                result += nums;
            } else if (!(result.includes(".") && nums == ".")) {
                result += nums;
            }
            $(".result").val(result);
        } else {
            if (arr[1] != null && result != "") {
                arr[2] = $(".result").val();
                let result = calcu(arr[1], arr[0], arr[2]);
                $(".result").val(result);
                arr[0] = result;
                arr[2] = null;
            } else {
                arr[0] = $(".result").val();
            }
            arr[1] = nums;
            result = "";
        }
    });
});

//计算
function calcu(sym, num1, num2) {
    let result = 0;
    num1 = num1 - 0;
    num2 = num2 - 0;
    switch (sym) {
        case "+": {
            result = num1 + num2;
            break;
        }
        case "-": {
            result = num1 - num2;
            break;
        }
        case "*": {
            result = num1 * num2;
            break;
        }
        case "/": {
            result = num1 / num2;
            break;
        }
    }
    return parseFloat(result.toFixed(10));       //取准确小数结果
}

//等号计算
function equal() {
    if (arr[1] != null && result != "") {
        let num = $(".result").val();
        let result = calcu(arr[1], arr[0], num);
        $(".result").val(result);
        arr[0] = result;
        arr[1] = arr[2] = null;
    } else if(arr[1] == null) {
        arr[0] = $(".result").val();
        $(".result").val(arr[0]);
    } else {
        $(".result").val(arr[0]);
        arr[1] = null;
    }
    result = "";
}

//清除屏幕
function c() {
    arr = [0];
    result = "";
    $(".result").val(0);
}

//取相反数
function reverse() {
    let num = $(".result").val();
    $(".result").val(-num);
}

let memory = 0;

//归零目前记忆的数字
function mC() {
    memory = 0;
    result = "";
}

// 记忆当前数字，加入累加数字当中
function mAdd() {
    let addNum = $(".result").val() - 0;
    memory += addNum;
    result = "";    
}

//记忆当前数字，总数扣除当前数字
function mSub() {
    let subNum = $(".result").val() - 0;
    memory -= subNum;
    result = "";    
}

// 将当前计算出来的数字呈现
function mR() {
    $(".result").val(memory);
    result = "";    
}

注：需要代码的也可以从我的主页上传文件中自取。

猿人小彭

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JS制作一个简单的计算器

用HTML+CSS+JS制作了一个简单的计算器，它的使用类似于生活中使用的计算器。暂时未发现有任何计算上的错误，有问题请联系我，谢谢。最终成果图：HTML代码块：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
复制链接

扫一扫