deepseek v3-0324科学计算器 HTML 实现

最新推荐文章于 2025-04-08 15:54:06 发布
最新推荐文章于 2025-04-08 15:54:06 发布
阅读量836 收藏 22
点赞数 13
分类专栏： deepseek 文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Liudef06/article/details/146911998
版权

科学计算器 HTML 实现

下面是一个美观且易于嵌套的科学计算器 HTML 实现。这个计算器具有标准计算和科学计算功能，设计简洁，可以直接嵌入到其他 HTML 页面中。
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>科学计算器</title>
    <style>
        :root {
            --primary-color: #4285f4;
            --secondary-color: #f1f3f4;
            --accent-color: #fbbc05;
            --text-color: #202124;
            --button-hover: #e8eaed;
        }

        .calculator-container {
            font-family: 'Roboto', Arial, sans-serif;
            max-width: 320px;
            margin: 20px auto;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            background: white;
        }

        .calculator-display {
            padding: 20px;
            text-align: right;
            background-color: var(--secondary-color);
            border-bottom: 1px solid #ddd;
        }

        .calculator-history {
            min-height: 20px;
            font-size: 14px;
            color: #70757a;
            margin-bottom: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .calculator-output {
            font-size: 28px;
            font-weight: 500;
            color: var(--text-color);
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .calculator-buttons {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 1px;
            background-color: #ddd;
        }

        .calculator-button {
            border: none;
            padding: 15px 0;
            font-size: 16px;
            cursor: pointer;
            background-color: white;
            transition: background-color 0.2s;
        }

        .calculator-button:hover {
            background-color: var(--button-hover);
        }

        .calculator-button.operator {
            background-color: var(--secondary-color);
        }

        .calculator-button.equals {
            background-color: var(--primary-color);
            color: white;
        }

        .calculator-button.function {
            background-color: var(--secondary-color);
            font-size: 14px;
        }

        .calculator-button.accent {
            color: var(--accent-color);
        }

        .calculator-mode-toggle {
            display: flex;
            border-bottom: 1px solid #ddd;
        }

        .mode-button {
            flex: 1;
            padding: 10px;
            text-align: center;
            cursor: pointer;
            background: none;
            border: none;
            font-size: 14px;
            transition: background-color 0.2s;
        }

        .mode-button.active {
            background-color: var(--secondary-color);
            font-weight: 500;
        }

        .mode-button:hover {
            background-color: var(--button-hover);
        }

        .scientific-buttons {
            display: none;
        }

        .scientific-mode .scientific-buttons {
            display: block;
        }

        .standard-mode .scientific-buttons {
            display: none;
        }
    </style>
</head>
<body>
    <div class="calculator-container" id="calculator">
        <div class="calculator-mode-toggle">
            <button class="mode-button active" data-mode="standard">标准</button>
            <button class="mode-button" data-mode="scientific">科学</button>
        </div>
        <div class="calculator-display">
            <div class="calculator-history" id="history"></div>
            <div class="calculator-output" id="output">0</div>
        </div>
        <div class="calculator-buttons">
            <!-- 科学计算按钮 -->
            <div class="scientific-buttons">
                <button class="calculator-button function" onclick="addToExpression('Math.sin(')">sin</button>
                <button class="calculator-button function" onclick="addToExpression('Math.cos(')">cos</button>
                <button class="calculator-button function" onclick="addToExpression('Math.tan(')">tan</button>
                <button class="calculator-button function" onclick="addToExpression('Math.log(')">ln</button>
                <button class="calculator-button function" onclick="addToExpression('Math.sqrt(')">√</button>
                
                <button class="calculator-button function" onclick="addToExpression('Math.asin(')">sin⁻¹</button>
                <button class="calculator-button function" onclick="addToExpression('Math.acos(')">cos⁻¹</button>
                <button class="calculator-button function" onclick="addToExpression('Math.atan(')">tan⁻¹</button>
                <button class="calculator-button function" onclick="addToExpression('Math.log10(')">log</button>
                <button class="calculator-button function" onclick="addToExpression('**2')">x²</button>
                
                <button class="calculator-button function" onclick="addToExpression('Math.PI')">π</button>
                <button class="calculator-button function" onclick="addToExpression('Math.E')">e</button>
                <button class="calculator-button function" onclick="addToExpression('(')">(</button>
                <button class="calculator-button function" onclick="addToExpression(')')">)</button>
                <button class="calculator-button function" onclick="addToExpression('**')">x^y</button>
            </div>
            
            <!-- 标准计算按钮 -->
            <button class="calculator-button operator" onclick="clearAll()">AC</button>
            <button class="calculator-button operator" onclick="backspace()">⌫</button>
            <button class="calculator-button operator" onclick="addToExpression('%')">%</button>
            <button class="calculator-button operator" onclick="addToExpression('/')">÷</button>
            <button class="calculator-button function" onclick="addToExpression('1/')">1/x</button>
            
            <button class="calculator-button" onclick="addToExpression('7')">7</button>
            <button class="calculator-button" onclick="addToExpression('8')">8</button>
            <button class="calculator-button" onclick="addToExpression('9')">9</button>
            <button class="calculator-button operator" onclick="addToExpression('*')">×</button>
            <button class="calculator-button function" onclick="addToExpression('Math.abs(')">|x|</button>
            
            <button class="calculator-button" onclick="addToExpression('4')">4</button>
            <button class="calculator-button" onclick="addToExpression('5')">5</button>
            <button class="calculator-button" onclick="addToExpression('6')">6</button>
            <button class="calculator-button operator" onclick="addToExpression('-')">-</button>
            <button class="calculator-button function" onclick="addToExpression('!')">x!</button>
            
            <button class="calculator-button" onclick="addToExpression('1')">1</button>
            <button class="calculator-button" onclick="addToExpression('2')">2</button>
            <button class="calculator-button" onclick="addToExpression('3')">3</button>
            <button class="calculator-button operator" onclick="addToExpression('+')">+</button>
            <button class="calculator-button function" onclick="addToExpression('10**')">10^x</button>
            
            <button class="calculator-button" onclick="addToExpression('0')" style="grid-column: span 2;">0</button>
            <button class="calculator-button" onclick="addToExpression('.')">.</button>
            <button class="calculator-button equals" onclick="calculate()" style="grid-column: span 2;">=</button>
        </div>
    </div>

    <script>
        let currentExpression = '';
        let isScientificMode = false;
        
        // 获取DOM元素
        const outputElement = document.getElementById('output');
        const historyElement = document.getElementById('history');
        const calculatorElement = document.getElementById('calculator');
        const modeButtons = document.querySelectorAll('.mode-button');
        
        // 切换计算器模式
        modeButtons.forEach(button => {
            button.addEventListener('click', () => {
                modeButtons.forEach(btn => btn.classList.remove('active'));
                button.classList.add('active');
                
                calculatorElement.classList.remove('standard-mode', 'scientific-mode');
                calculatorElement.classList.add(`${button.dataset.mode}-mode`);
                isScientificMode = button.dataset.mode === 'scientific';
            });
        });
        
        // 添加到表达式
        function addToExpression(value) {
            if (currentExpression === '0' && !isNaN(value)) {
                currentExpression = value;
            } else {
                currentExpression += value;
            }
            updateDisplay();
        }
        
        // 清除所有
        function clearAll() {
            currentExpression = '0';
            historyElement.textContent = '';
            updateDisplay();
        }
        
        // 退格
        function backspace() {
            if (currentExpression.length === 1) {
                currentExpression = '0';
            } else {
                currentExpression = currentExpression.slice(0, -1);
            }
            updateDisplay();
        }
        
        // 计算阶乘
        function factorial(n) {
            if (n < 0) return NaN;
            if (n === 0 || n === 1) return 1;
            let result = 1;
            for (let i = 2; i <= n; i++) {
                result *= i;
            }
            return result;
        }
        
        // 计算表达式
        function calculate() {
            try {
                // 替换特殊函数和符号
                let expression = currentExpression
                    .replace(/(\d+)!/g, (_, n) => `factorial(${n})`)
                    .replace(/\^/g, '**');
                
                // 保存历史
                historyElement.textContent = currentExpression + ' =';
                
                // 计算并显示结果
                const result = eval(expression);
                currentExpression = result.toString();
                updateDisplay();
            } catch (error) {
                currentExpression = 'Error';
                updateDisplay();
                setTimeout(clearAll, 1000);
            }
        }
        
        // 更新显示
        function updateDisplay() {
            outputElement.textContent = currentExpression;
        }
        
        // 键盘支持
        document.addEventListener('keydown', (e) => {
            const key = e.key;
            
            if (/[0-9]/.test(key)) {
                addToExpression(key);
            } else if (key === '.') {
                addToExpression('.');
            } else if (key === '+' || key === '-' || key === '*' || key === '/') {
                addToExpression(key);
            } else if (key === '%') {
                addToExpression('%');
            } else if (key === '(' || key === ')') {
                addToExpression(key);
            } else if (key === 'Enter' || key === '=') {
                calculate();
            } else if (key === 'Backspace') {
                backspace();
            } else if (key === 'Escape') {
                clearAll();
            } else if (key === '^') {
                addToExpression('**');
            }
        });
    </script>
</body>
</html>

特点说明

  1. 美观设计：

    • 采用Material Design风格，配色协调
    • 圆角边框和阴影效果
    • 响应式设计，适应不同屏幕尺寸

  2. 功能完善：

    • 标准计算功能（加减乘除、百分比等）
    • 科学计算功能（三角函数、对数、幂运算、阶乘等）
    • 计算历史显示
    • 键盘支持

  3. 易于嵌套：

    • 所有代码包含在一个独立的容器中
    • 不会影响外部页面的样式
    • 可以轻松复制到任何HTML页面中

  4. 模式切换：

    • 标准模式和科学模式一键切换
    • 科学计算按钮在不使用时隐藏

使用方法

  1. 直接将上述代码复制到您的HTML文件中
  2. 或者将代码保存为单独的HTML文件，然后使用iframe嵌入到其他页面中：
<iframe src="calculator.html" width="350" height="550" frameborder="0"></iframe>

这个计算器完全使用原生HTML、CSS和JavaScript实现，无需任何外部依赖，可以直接在任何现代浏览器中运行。

ANSI转义码----让你的终端打印有颜色
guoweilkd的博客
05-23 1608
ANSI转义码(ANSI escape code) 参考链接: http://www.thefullwiki.org/ANSI_escape_code https://en.wikipedia.org/wiki/ANSI_escape_code ANSI转义序列是一种带内信号的转义序列标准，用于控制视频文本终端上的光标位置、颜色和其他选项。在文本中嵌入确定的字节序列。 转义序列的控制字符 转义序列使用ESC开头。其中ESC的ASCII值为27(十六进制为0x1B,把进制为033).在使用时一般表示为\0
ANSI转义序列
Stewie Lee的博客
05-09 3232
SGR（Select Graphic Rendition）是一种ANSI 转义码序列，同样也是上面的CSI 序列的一种，就是上面CSI 序列表格中背景为蓝色的一行，用于在文本终端中设置文本属性，包括颜色、样式和其他外观效果。它允许开发者控制文本在终端上的呈现方式，从而创建出更丰富多彩的用户界面和输出效果。SGR 序列由 ESC（Escape）字符后跟着零个或多个以分号分隔的参数组成，然后以字母 "m" 结束。参数用于指定要应用的不同文本属性，例如颜色、粗体、斜体等。
ANSI转义代码(ansi escape code)
phoenix_wangxd的博客
10-02 2774
在命令行终端中的内容通常会是黑底白字，但是有的时候我们会看到一些写的好的命令行工具，它们会输出各种的颜色的提示信息，尤其是绿色的Success与红色的Failed， 这对我们了解程序运行状态来说，有着很好的帮助。你可能也会好奇它们是怎么实现的，本文想要说明的就是这个问题。
掌握ANSI转义序列：编程中控制光标与屏幕
最新发布
weixin_42627459的博客
04-08 445
本文介绍了如何利用ANSI转义序列在文本界面中控制光标位置、移动和屏幕清除等操作。通过C语言的printf函数和特定的转义字符组合，可以实现对光标的精确控制和屏幕内容的管理。
常见的ANSI转义码
qq_43279097的博客
02-08 1416
`\x1b[100m` 到 `\x1b[107m`：设置背景颜色为明亮的黑、红、绿、黄、蓝、洋红、青、白。- `\x1b[90m` 到 `\x1b[97m`：设置文本颜色为明亮的黑、红、绿、黄、蓝、洋红、青、白。- `\x1b[30m` 到 `\x1b[37m`：设置文本颜色为黑、红、绿、黄、蓝、洋红、青、白。- `\x1b[40m` 到 `\x1b[47m`：设置背景颜色为黑、红、绿、黄、蓝、洋红、青、白。- `\x1b[H` 或 `\x1b[;- `\x1b[39m`：重置文本颜色为默认值。
ANSI 转义字符
shaowei的博客
10-03 3427
ANSI C语言中的全部转义字符序列如下：## a:响铃符 b:回退符 f:换页符 n:换行符 r:回车符 t:横向制表符 v:纵向制表符 :反斜杠 ?:问号 ':单引号 &quot;：双引号 ooo:八进制数 xhh:十六进制数 在编程中经常看到如：\033的转义字符，’\033’ == ‘\x1b’ ‘\0’：8进制，　‘\x’：16进制 它们的具体意思如下： 转义字符...
ANSI 转义序列
嵌入式技术
06-18 1915
ANSI 转义序列是一种用于控制终端输出的色彩、样式、光标位置以及控制终端行为的特殊字节. 它的使用方式就是通过 stdout 在字符串、字节中向外输出**Control当终端支持此转义序列的功能时, 就会呈现出相应的效果. 此功能常常用于终端的彩色输出、构建 Text User Interface 应用等. ANSI 转义序列在 Linux、 MacOS 的各终端下得到了广泛运用, 但是在 Windows 系统上支持不佳. 不过 Microsoft 新出的 microsoft/terminal .
使用ANSI转义序列设置终端文本颜色
zhu_superman的博客
06-21 1364
在使用ANSI转义序列设置终端文本颜色时，背景颜色和文本（前景）颜色的区分主要通过不同的ANSI代码来实现。ANSI转义序列使用格式为\033[代码m的结构，其中\033是转义字符（等同于\e），m指示颜色设置的结束。
解决windows输出彩色字体（ANSI转义序列）乱码的问题
07-13
ANSI转义序列是一种控制字符序列，常用于控制终端的颜色、光标位置等，它在Linux和macOS等系统中广泛使用。这篇文章将探讨如何在Windows上解决这个兼容性问题，让你也能享受到彩色的命令行输出。 首先，我们需要...
使用 ANSI 转义序列输出彩色文本
Fengzi_21的博客
01-25 1385
本文教大家使用 ANSI 转义序列输出彩色文本。
swift-AnsiEscapes用于操纵终端的ANSI转义码
08-15
ANSI转义码（也称为ECMA-48控制序列）是一种嵌入在文本流中的特殊字符序列，它们用来改变终端的显示特性，如文本颜色、背景色、文本格式（如加粗、斜体）以及光标移动等。这些码以ASCII的 ESC 字符（ASCII值为27）...
易语言 API_Utf8-Ansi-Unicode转码源码
09-25
易语言 API_Utf8-Ansi-Unicode转码源码
ANSI链接中文转码工具ENcode
12-24
ANSI、UTF链接中文转码工具,可以支持快速的将类似于百度搜索链接地址中的中文转码转换。 支持ANSI、UTF转码和转中文。 支持剪贴板信息直接粘贴转码。
文本转码 ansi转unicode
07-19
文本转码 c# ansi转unicode
计算机终端控制中的ANSI转义序列详解与应用
10-27
ANSI转义序列是一种特殊的字符序列，用于控制视频终端上的光标移动、颜色改变以及其他显示选项。这些序列以ASCII转义字符（ESC，即27）开始，紧跟着是一个左方括号“[”，以及一系列的参数和指令字符。通过这种方式...
ANSI 转义序列学习笔记
m0_72410588的博客
07-18 983
ANSI 转义序列是由一系列以\e[开头、以字母和数字组成的字符序列组成的。在大多数终端程序中，我们可以用\e或\033来表示转义字符。这些转义序列告诉终端应该如何处理文本输出，比如改变文本颜色、样式、光标位置等。通过插入这些特殊的转义序列，我们可以实现在终端中进行更加丰富和个性化的输出。ANSI 转义序列是一种用于控制终端输出和显示的标准化方式。本篇博客介绍了 ANSI 转义序列的基本语法和常见的控制命令，包括文本样式控制、光标控制和清屏操作。
【杂记】ANSI、ANSI编码、ASCII编码、ASCII控制字符、ANSI转义序列
无数_Mirage的博客
09-20 3044
(American National Standards Institute)：美国国家标准协会。
ANSI转义代码（ANSI escape code）
anleng6817的博客
01-03 1224
ANSI escape code - Wikipedia linux 输出绿色的✓TRUE，红色的✗FALSE ： echo -e "\x1B[1;32m✓TRUE \x1B[0mXXX" echo -e "\x1B[1;31m✗FALSE \x1B[0mOOO" PS： \x1B为十进制27在 ASCLL 里代表ESC CMD 中得用 ANSI.SYS 转载于:https:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值