首页用jq实现简单的计算器功能

用jq实现简单的计算器功能

时间: 2024-09-14 11:08:15 浏览: 78

使用jQuery (简称jq) 实现一个简单计算器功能，主要是通过JavaScript编写事件监听器和函数处理输入和计算操作。下面是一个基本的例子：首先，在HTML中创建一个简单的计算器界面，包括输入框、数字按钮和运算符按钮： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Simple Calculator with jQuery</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <input type="text" id="display" readonly> <div class="buttons"> <button>1</button> <button>2</button> <button>3</button>  <button>=</button> <button>-</button> <button>*</button> <button>/</button> </div> <script src="calculator.js"></script> </body> </html> ``` 接下来，创建一个名为`calculator.js`的文件，用于绑定点击事件并处理计算逻辑： ```javascript $(document).ready(function() { // 数字按钮点击事件处理 $('.buttons button').click(function(e) { let num = $(this).text(); $('#display').val($('#display').val() + num); }); // 等于按钮点击事件处理，进行计算 $('.buttons #=').click(function() { let result = eval($('#display').val()); // 注意：使用eval可能存在安全风险，这里仅作示例，请根据实际需求选择更安全的方式 $('#display').val(result); }); // 运算符按钮点击事件处理，清除输入并添加运算符 $('.buttons [data-op]').click(function(e) { $('#display').val($(this).data('op')); }); }); ``` 在这个例子中，我们捕获了数字按钮、等于按钮和运算符按钮的点击事件。当用户点击数字时，它们会被添加到输入框中；点击等号时，会尝试计算当前的表达式；点击运算符时，会清空输入框，并添加相应的运算符。

阅读全文