探索计算之美：HTML & CSS 计算器案例

网运_沉鱼落雁

于 2024-05-10 11:30:24 发布

阅读量424

点赞数 5

文章标签： html css 前端

网运_沉鱼落雁

本文链接：https://blog.csdn.net/m0_57076217/article/details/138657216

版权

本次案例是通过HTML和CSS，我们可以为计算器赋予独特的外观和功能；

在这个计算器中，你将会发现：

简洁清晰的界面设计，使用户能够轻松输入和查看计算结果。
利用HTML构建的结构，确保页面具有良好的可访问性和可维护性。
使用CSS进行精美的样式设计，为计算器增添视觉上的吸引力。

组件：

加减乘除，阶乘，（，），三角函数（tan、cos、sin），±，√×。

依赖包：angular.js 这个去官网下载

官网：AngularJS — Superheroic JavaScript MVW Framework

中文官网：AngularJS下载

下载后解压选取下图拖动到代码文件目录即可

样式：

主要代码

HTML+JS：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <script src="/angular.js"></script>
    <link rel="stylesheet" href="/calc.css">
</head>

<body>

    <body ng-app="zt">
        <div class="ys">
            <div ng-controller="zt-jsq">
                <div class="ttx">
                    <div class="tt">计算器</div>
                </div>
                <div class="result"><input type="text" id="result" ng-model="result" readonly /></div>
                <div class="keyboard-row">
                    <button class="keyboard-button" ng-click="addToExpression('(')">(</button>
                    <button class="keyboard-button" ng-click="addToExpression(')')">)</button>
                    <button class="keyboard-button" ng-click="factorial()">n!</button>
                    <button class="keyboard-button" ng-click="clear()">C</button>
                    <button class="keyboard-button" ng-click="backspace()">←</button>
                </div>
                <div class="keyboard-row">
                    <button class="keyboard-button" ng-click="appendNumber('7')">7</button>
                    <button class="keyboard-button" ng-click="appendNumber('8')">8</button>
                    <button class="keyboard-button" ng-click="appendNumber('9')">9</button>
                    <button class="keyboard-button" ng-click="appendOperator('+')">+</button>
                    <button class="keyboard-button" ng-click="appendOperator('*')">*</button>

                </div>
                <div class="keyboard-row">
                    <button class="keyboard-button" ng-click="appendNumber('4')">4</button>
                    <button class="keyboard-button" ng-click="appendNumber('5')">5</button>
                    <button class="keyboard-button" ng-click="appendNumber('6')">6</button>
                    <button class="keyboard-button" ng-click="appendOperator('-')">-</button>
                    <button class="keyboard-button" ng-click="appendOperator('/')">/</button>

                </div>
                <div class="keyboard-row">
                    <button class="keyboard-button" ng-click="appendNumber('1')">1</button>
                    <button class="keyboard-button" ng-click="appendNumber('2')">2</button>
                    <button class="keyboard-button" ng-click="appendNumber('3')">3</button>
                    <button class="keyboard-button" ng-click="appendNumber('0')">0</button>
                    <button class="keyboard-button1" ng-click="calculate()">=</button>
                </div>
                <div class="keyboard-row">
                    <button class="keyboard-button" ng-click="zf()">±</button>
                    <button class="keyboard-button" ng-click="fz()">1/x</button>
                    <button class="keyboard-button" ng-click="pf()">x²</button>
                    <button class="keyboard-button" ng-click="gh()">√x</button>
                </div>
                <div class="keyboard-row">
                    <button class="keyboard-button" ng-click="sin()">sin</button>
                    <button class="keyboard-button" ng-click="cos()">cos</button>
                    <button class="keyboard-button" ng-click="tan()">tan</button>
                    <button class="keyboard-button" ng-click="bfh()">%</button>
                </div>
            </div>
        </div>
    </body>

</html>
<script>
    // 创建模块
    var app = angular.module('zt', []);
    // 设置 zt-jsq 控制器
    app.controller('zt-jsq', function ($scope) {
        // 计算器显示屏 初始 数值为0
        $scope.result = '0';
        // 计算器显示屏上的计算公式
        $scope.expression = '';
        // 输入数值在 显示屏上
        $scope.appendNumber = function (number) {
            // 判定 公式是否为 空
            if ($scope.expression === '') {
                // 为空 输入数值
                $scope.expression = number;
                $scope.result = number;
            } else {
                // 非空 公式内容以字符串形式 拼接
                $scope.expression += number;
                // 计算器显示屏 显示 当前公式
                $scope.result = $scope.expression;
            }
        };

        // 添加 运算符
        $scope.appendOperator = function (operator) {
            // 当前 计算公式中最后一位字符
            var end = $scope.expression.slice(-1);
            // 加减乘除 符号
            var str = '+-/*';
            // 判定 计算公式 是否为空 并且 计算公式中最后一位字符 是否是 加减乘除符号
            if ($scope.expression === '' || str.includes(end)) {
                // 如果是 忽略连续的运算符
                return;
            }
            // 判定 计算公式是否 非空
            if ($scope.expression !== '') {
                // 非空 并 最后一位不是 加减乘除 ，添加运算符
                $scope.expression += operator;
                // 计算器显示屏 显示 当前公式
                $scope.result = $scope.expression;
            }
        };
        // 清除所有输入
        $scope.clear = function () {
            $scope.result = '0';
            $scope.expression = '';
        };
        // 执行 运算公式
        $scope.zf = function () {
            // 将表达式转换为数字
            var number = parseFloat($scope.expression);
            // 检查数字是否是NaN，如果是，则将表达式设置为负号
            if (isNaN(number)) {
                $scope.expression = "-";
            } else {
                // 对数字进行取反操作
                $scope.expression = -number;
            }
            // 更新结果为取反后的表达式
            $scope.result = $scope.expression;
        };
        $scope.fz = function () {
            if ($scope.expression.startsWith('-')) {
                $scope.expression = $scope.expression.slice(1);
            }
            $scope.expression = "1/(" + $scope.expression + ")";
            $scope.result = $scope.expression;
        };

        $scope.pf = function () {
            $scope.expression = "Math.pow(" + $scope.expression + ", 2)";
            $scope.result = $scope.expression;
        };

        $scope.gh = function () {
            $scope.expression = "Math.sqrt(" + $scope.expression + ")";
            $scope.result = $scope.expression;
        };

        $scope.bfh = function () {
            $scope.expression += "*0.01";
            $scope.result = $scope.expression;
        };

        $scope.sin = function () {
            $scope.expression = "Math.sin(" + $scope.expression + " * Math.PI / 180)"; // Assuming the input is in degrees
            $scope.result = $scope.expression;
        };

        $scope.cos = function () {
            $scope.expression = "Math.cos(" + $scope.expression + " * Math.PI / 180)"; // Assuming the input is in degrees
            $scope.result = $scope.expression;
        };

        $scope.tan = function () {
            $scope.expression = "Math.tan(" + $scope.expression + " * Math.PI / 180)"; // Assuming the input is in degrees
            $scope.result = $scope.expression;
        };

        $scope.log = function () {
            $scope.expression = "Math.log(" + $scope.expression + ")";
            $scope.result = $scope.expression;
        };
        //阶乘
        $scope.factorial = function () {
            var number = parseFloat($scope.expression);
            if (!isNaN(number) && number >= 0 && Math.floor(number) === number) { // 检查输入是否为非负整数
                var result = 1;
                for (var i = 2; i <= number; i++) {
                    result *= i;
                }
                $scope.expression = result.toString();
                $scope.result = $scope.expression;
            } else {
                $scope.result = "Error";
            }
        };
        //（）号
        $scope.addToExpression = function (value) {
            if ($scope.expression === '') {
                $scope.expression = value;
                $scope.result = value;
            } else {
                $scope.expression += value;
                $scope.result = $scope.expression;
            }
        };

        // 删除 最后一个字符 
        $scope.backspace = function () {
            // 判定 计算公式 当前长度是否 大于 0
            if ($scope.expression.length > 0) {
                // 大于 0 ，删除最后一位字符
                $scope.expression = $scope.expression.slice(0, -1);
                // 计算器显示屏 显示 当前公式 
                $scope.result = $scope.expression;
            } else if ($scope.result.length > 0) {
                // 计算器显示屏显示长度 大于0 ，当计算公式不大于0
                // 计算公式以运算
                $scope.result = '0';
            }
        };

        // 执行 运算公式
        $scope.calculate = function () {
            try {
                // 判定 计算公式 长度 是否大于 0
                if ($scope.expression.length > 0) {
                    // eval -->  将 字符串 作为计算公式 进行计算
                    // 大于0 ， 执行 计算公式
                    var calculatedResult = eval($scope.expression);
                    // 将 计算结果 转换为 字符串
                    $scope.result = calculatedResult.toString();
                    // 清空 计算公式 
                    $scope.expression = '';
                } else if ($scope.result.length > 0) {
                    // 计算器显示屏显示长度 大于0 ，当计算公式不大于0
                    // 不做操作
                    return;
                }

            }
            catch (e) { // 如果表达式有误，重置结果和表达式 scope.expression = '';
                $scope.result = '0';
                $scope.expression = '';
                window.alert('表达式错误！');
            }
        };
    });
</script>
</body>

</html>

</html>

CSS样式：

.keyboard-button {
    width: 60px;  /* 调整为更大的尺寸 */
    height: 50px;
    font-size: 15px;
    background-color: #ffffff;
    border: 2px solid #ccc;
    cursor: pointer;
    border-radius: 5px;
    margin: 1px;  /* 增加按钮间隔 */
    justify-content: center;
    align-items: center;
    margin-top: 3px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);  /* 添加轻微阴影 */
}

.keyboard-button:hover {
    background-color: #e0e0e0;
}

.keyboard-button:active {
    background-color: #d0d0d0;
}

.keyboard-button1 {
    width: 60px;  /* 保持与其他按钮一致 */
    height: 50px;
    font-size: 15px;
    background-color: #1d6978;
    border: 1px solid #ccc;
    cursor: pointer;
    color: #fff;
    margin-left: 1px;
    border-radius: 5px;
}

.keyboard-button1:hover {
    background-color: #337785;
}

.keyboard-button1:active {
    background-color:#1d6978;
}

.result {
    
    width: auto;
    height: 40px;
    /* text-align: ; */
    border: 1px solid #ccc;
    border-radius: 5px;
    #result {
     width: 100%;
     height: 100%;
     border-radius: 5px;
    color: #000000;
    font-size: 25px;
    }
}
.ys {
    background-color: rgb(250, 248, 255);
    width: 100%;  
    max-width: 350px;  
    height: auto;
    display: flex;
    margin: 20px auto;  /* 增加上下边距以便更好的居中 */
    justify-content: center;
    border-radius: 10px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);  /* 给整体容器添加阴影 */
}
.ttx{
    width: 38%;
    background-color:  #54cbe3;
    border-radius: 5px;
    justify-content: center;
}
.tt{
    width: 100%;
    font-size: 25px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #000000;
    text-align: center;
    display: auto;
    margin-bottom: 2px;
}