在页面上使用javascript写一个计算器_用js写一个计算器资源-CSDN文库

共1个文件

html：1个

需积分: 27 40 浏览量 2009-04-24 08:15:13 上传评论 1 收藏 688B RAR 举报

在网页上创建一个JavaScript计算器是一项基础但实用的编程任务，它可以帮助我们理解DOM操作、事件处理和基本的数学计算。让我们深入探讨这个话题。 HTML（HyperText Markup Language）是构建网页的基本语言，用于定义页面结构。在这个场景中，我们需要创建一个包含数字按钮、运算符按钮和显示区域的布局。例如，可以使用`<input>`标签创建一个文本框来显示计算结果，以及一系列`<button>`标签来表示数字和操作符： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>JavaScript计算器</title> </head> <body> <input id="display" disabled> <div> <button>1</button> <button>2</button> <button>3</button> <button>+</button> </div>  </body> </html> ``` 接着，我们需要引入JavaScript，一种广泛使用的客户端脚本语言，用于实现动态交互。我们可以使用内联`<script>`标签或外部`.js`文件来编写JavaScript代码。为了响应用户点击按钮，我们需要添加事件监听器。例如，当用户点击数字按钮时，可以将该数字添加到显示区域： ```javascript document.querySelectorAll('button').forEach(btn => { btn.addEventListener('click', e => { const display = document.getElementById('display'); if (e.target.innerText !== '+' && e.target.innerText !== '-') { display.value += e.target.innerText; } else { // 处理运算符逻辑 } }); }); ``` 对于运算符按钮，我们需要保存当前的操作符和值，以便进行计算。可以使用变量来跟踪这些信息，并在用户按下等号按钮时执行计算： ```javascript let operator = null; let operand1 = null; function calculate() { if (operand1 === null) return; let operand2 = parseFloat(display.value); let result; switch (operator) { case '+': result = operand1 + operand2; break; case '-': result = operand1 - operand2; break; // 添加其他运算符处理 } display.value = result; operator = null; operand1 = result; } // 将等号按钮的点击事件绑定到calculate函数 document.querySelector('=').addEventListener('click', calculate); ``` 在这个简单的计算器中，我们尚未处理除法和乘法，以及优先级和括号等复杂功能。要实现这些，我们需要更复杂的逻辑，可能还需要处理错误情况，如除以零。此外，可以优化显示逻辑，例如使用CSS使计算器看起来更专业。创建一个JavaScript计算器是一个很好的练习，可以帮助初学者理解JavaScript与HTML的交互以及基本的计算逻辑。通过不断迭代和改进，可以将其转化为一个功能完善的网页应用。

资源推荐

资源详情

资源评论

收起资源包目录

javascript写一个计算器.rar （1个子文件）

nb的表格.html 1KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title></title> <style type="text/css"> .but{width:33px;} table{margin:auto;} </style> <script type="text/javascript"> function cont(o) { var txt = document.getElementById('text'); if(o=='=') txt.value = eval(txt.value) else if(o=='C') txt.value = ''; else txt.value += o; } </script> </head> <body> <table border="1"> <tr> <td colspan="4"><input id="text" /></td> </tr> <tr> <script type="text/javascript"> var v = '123C456+789-0*/='; for(var i=1; i<=v.length; i++) { document.write("<td><input onClick='cont(this.value)' class='but'' type='button' value='"+v.charAt(i-1)+"' /></td>"); if(i%4==0) document.write("</tr><tr>"); } </script> </tr> </table> </body> </html>

评论收藏

内容反馈