jQuery计算器

原创 已于 2025-06-27 14:09:04 修改 · 717 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言 #ecmascript

于 2025-05-24 16:53:21 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery计算器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f5f5f5;
            margin: 0;
        }
        .calculator {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 300px;
        }
        .display {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 15px;
            text-align: right;
            font-size: 24px;
            height: 30px;
        }
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 10px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 15px;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #45a049;
        }
        .operator {
            background-color: #ff9800;
        }
        .operator:hover {
            background-color: #e68a00;
        }
        .clear {
            background-color: #f44336;
        }
        .clear:hover {
            background-color: #d32f2f;
        }
        .equals {
            background-color: #2196F3;
        }
        .equals:hover {
            background-color: #0b7dda;
        }
        .footer {
            margin-top: 20px;
            text-align: center;
            font-size: 12px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <div class="display" id="display">0</div>
        <div class="buttons">
            <button class="clear" id="clear">C</button>
            <button class="operator" id="backspace">←</button>
            <button class="operator" id="percent">%</button>
            <button class="operator" id="divide">/</button>
            
            <button class="number" id="seven">7</button>
            <button class="number" id="eight">8</button>
            <button class="number" id="nine">9</button>
            <button class="operator" id="multiply">×</button>
            
            <button class="number" id="four">4</button>
            <button class="number" id="five">5</button>
            <button class="number" id="six">6</button>
            <button class="operator" id="subtract">-</button>
            
            <button class="number" id="one">1</button>
            <button class="number" id="two">2</button>
            <button class="number" id="three">3</button>
            <button class="operator" id="add">+</button>
            
            <button class="number" id="zero">0</button>
            <button class="number" id="decimal">.</button>
            <button class="equals" id="equals" colspan="2">=</button>
        </div>
        <div class="footer">
            <p>简单计算器 - 由jQuery驱动</p>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            let currentInput = '0';
            let previousInput = '';
            let operation = null;
            let resetScreen = false;
            
            // 更新显示
            function updateDisplay() {
                $('#display').text(currentInput);
            }
            
            // 数字按钮点击事件
            $('.number').click(function() {
                const number = $(this).text();
                
                if (currentInput === '0' || resetScreen) {
                    currentInput = number;
                    resetScreen = false;
                } else {
                    currentInput += number;
                }
                
                updateDisplay();
            });
            
            // 运算符按钮点击事件
            $('.operator').click(function() {
                const operator = $(this).text();
                
                if ($(this).attr('id') === 'backspace') {
                    // 退格功能
                    if (currentInput.length === 1) {
                        currentInput = '0';
                    } else {
                        currentInput = currentInput.slice(0, -1);
                    }
                    updateDisplay();
                    return;
                }
                
                if ($(this).attr('id') === 'percent') {
                    // 百分比功能
                    currentInput = (parseFloat(currentInput) / 100).toString();
                    updateDisplay();
                    return;
                }
                
                if (operation !== null) calculate();
                previousInput = currentInput;
                operation = operator;
                resetScreen = true;
            });
            
            // 等号按钮点击事件
            $('#equals').click(function() {
                calculate();
                operation = null;
            });
            
            // 清除按钮点击事件
            $('#clear').click(function() {
                currentInput = '0';
                previousInput = '';
                operation = null;
                updateDisplay();
            });
            
            // 小数点按钮点击事件
            $('#decimal').click(function() {
                if (resetScreen) {
                    currentInput = '0.';
                    resetScreen = false;
                    updateDisplay();
                    return;
                }
                
                if (!currentInput.includes('.')) {
                    currentInput += '.';
                    updateDisplay();
                }
            });
            
            // 计算函数
            function calculate() {
                let result;
                const prev = parseFloat(previousInput);
                const current = parseFloat(currentInput);
                
                if (isNaN(prev) || isNaN(current)) return;
                
                switch (operation) {
                    case '+':
                        result = prev + current;
                        break;
                    case '-':
                        result = prev - current;
                        break;
                    case '×':
                        result = prev * current;
                        break;
                    case '/':
                        result = prev / current;
                        break;
                    default:
                        return;
                }
                
                currentInput = result.toString();
                resetScreen = true;
                updateDisplay();564
            }
            
            // 初始化显示
            updateDisplay();
        });
    </script>
</body>
</html>

ziblog
关注
jquery计算器
Sore4的博客
05-19 661
这次讲解的是一篇关于计算的案例，先是创建一个新的HTML页面 在新的HTML页面里，先编程一个类似与计算器的一个表格 编程的代码，如下图： HTML代码： CSS代码： Js代码： 注意：script标签里还有一条重要的，在我上一篇讲述到下载的jQuery插件，需要再创一个script标签里引入jquery-3.6.0.min.js，不要贪图一时的快而忽略这条重要的信息，一定要审阅。 Css样式就不详细讲解了，用一个大的div标签，分为两个小的div在里面，主要的是P标签，要设置id，并且
JQuery计算器
qq_33230482的博客
11-09 442
JQuery实现计算器
JQuery 计算器加法运算
weixin_50784508的博客
06-13 293
【代码】JQuery 计算器加法运算。
bootstrap 插件 计算器_基于Bootstrap 3的精美jQuery计算器插件
weixin_39548541的博客
12-20 370
SimpleCalculadora是一款基于Bootstrap 3的简单精美的jQuery计算器插件。该计算器插件的按钮使用3D按钮，整体设计简洁大方，可以完成加减乘除的4则运算。并且可以通过参数来设置按键的颜色和位置。使用方法使用该计算器插件需要引入Bootstap3依赖文件，以及jQuery和SimpleCalculadorajQuery.css文件，SimpleCalculadorajQue...
JQuery实现简易计算器
DaiYuMeng的博客
10-05 4528
最近在学习jquery框架，写了好多小demo，这个案例讲的就是jquery简易版计算器。 本人目前承接各类小demo和作业，类型有HTML+CSS+JS/部分前端框架/JAVA/Android/PHP/高等数学，有意请私聊！ 效果图片如下： 第一张是刚运行在网页时的效果图。 第二张是输入运算数和运算符时的效果图。 第三张是错误输入的运算符。 整体代码如下： <html...
jquery 计算器
liuli1990t的专栏
01-06 766
无标题文档 input{width:32px;height:24px;} #zero{width:68px;} #j{height:56px;} .result{width:175px;} #text1{width:175px;} div{width:180px;border:#CCC 1px solid;padding:10px;}       $(function
jQuery计算器插件
weixin_30819163的博客
12-03 156
在线演示 本地下载 转载于:https://www.cnblogs.com/qixidi/p/10060632.html
jQuery简易计算器
Gaia_qi的博客
04-08 900
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;简易计算器&lt;/title&gt; &lt;style&gt; body{width: 500px;margin:
jQuery制作一个精致计算器
sunygoal的博客
11-04 818
【代码】jQuery制作一个精致计算器。
jQuery计算器带操作记录.zip
05-23
《jQuery计算器带操作记录》 在网页开发中，交互性和用户体验是至关重要的因素。这个名为“jQuery计算器带操作记录”的项目，就是一种优秀的实践，它利用了jQuery库的强大功能，为用户提供了直观、友好的计算体验，...
Jeecg AI应用开发平台v1.0.0首版发布，快速搭建AI知识库或AI聊天助手
JEECG官方博客
12-04 978
Jeecg-AI是一款基于大型语言模型和RAG技术的全栈式AI开发平台，支持快速构建和部署个性化AI应用。该平台提供AI知识库管理、流程编排、模型配置、向量库对接等功能，支持ChatGPT、DeepSeek等多种大模型，并可与业务系统深度集成。采用Vue3+Spring Boot技术栈，具备智能问答、文档处理、API生成等能力，相比Dify平台更注重低代码与业务集成。开发者可通过Docker一键部署或源码构建，实现智能应用的快速开发。
Vue 通用复选框组互斥 Hooks：兼容 Element Plus + Ant Design Vue
a3212768093的博客
12-02 875
本文介绍了一个通用的Vue Hooks useExclusiveCheckbox，用于实现复选框组的互斥选择功能。该Hooks兼容ElementPlus和AntDesignVue两大UI库，主要特点包括：跨UI库兼容、轻量无依赖、灵活配置互斥选项值、全场景适配和类型安全。核心逻辑通过对比新旧选中值数组，自动处理互斥选项与其他选项的切换关系。文章提供了完整代码和使用示例，分别演示了在ElementPlus和AntDesignVue中的实现方式，并解答了常见问题。该方案可显著提升开发效率，适用于各类需要互斥选择
推荐 | JoyAgent-JDGenie：开箱即用的端到端多智能体产品
最新发布
lpfasd123的博客
12-05 327
如果你在寻找一款真正可落地的多智能体产品，用来“搜索-分析-生成报告”、“数据问答与诊断”、“代码解释与图表生成”，同时希望易部署、易扩展、易二次开发——JoyAgent-JDGenie 是非常值得试用与推荐的选择。只需填好少量配置，即可获得端到端的流式体验与交付能力。
网络安全漏洞之React 框架分析
anquan2233的博客
12-04 1185
昨日爆出的 CVE-2025-55182，CVSS 10.0 满分严重漏洞，影响 React 19 及所有 Next.js 15/16 项目。核心问题是 React Server Components 的 Flight 协议存在不安全反序列化，无需任何认证，攻击者只需向 Server Actions 端点发送一个精心构造的 multipart 请求，即可实现远程代码执行（RCE）。目前已确认多个完整 0day 利用链（包括 vm.runInThisContext 在内），未修补实例基本等于已失陷。
vue实现页面不断插入内容并且自动滚动功能
weixin_50606255的博客
12-04 279
我们在看视频时经常会看到黑客入侵别人电脑会在屏幕上显示一串代码，并且代码不断插入自动滚动，看起来很厉害的样子，现在就在此纪录实现此功能：
ruoyi集成camunda实现bpmn在线设计器
xrl2012的专栏
12-03 1210
摘要： 本文介绍了如何在RuoYi-Vue2前端集成Camunda BPMN在线设计器，实现流程建模功能。通过npm安装bpmn-js等依赖包，配置vue.config.js解决转译和别名问题，并提供了测试页面代码示例。页面包含导入/导出XML/SVG、流程检查、部署等功能，支持BPMN流程设计器的初始化和基本操作。环境要求包括JDK 1.8+、MySQL 5.7+、Node 23+等。完整方案可参考若依工作流。
基于Springboot2+Vue2的旅游景点购票系统
自学网站s.jf3q.com,菜鸟的成长之路
12-02 746
本系统是一个集旅游景点信息展示、在线购票、用户游记分享与互动交流于一体的综合性平台。核心价值在于提供便捷的景点门票预订服务，同时构建活跃的旅游社区，促进用户间的经验分享。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值