用javascript实现的计算器代码_java科学计算器代码资源-CSDN下载

共1个文件

htm：1个

javascript

计算器

代码

5星 · 超过95%的资源需积分: 11 102 浏览量 2010-11-15 11:16:32 上传评论 2 收藏 997B RAR 举报

在本文中，我们将深入探讨如何使用JavaScript来实现一个基本的网页计算器。JavaScript是一种广泛用于创建交互式网页的脚本语言，它可以与HTML和CSS紧密结合，为用户带来动态体验。在这个项目中，我们专注于构建一个具备加法、减法、乘法、除法、求倒数、求模以及求表达式功能的计算器。我们需要理解JavaScript的基本语法。它是一种弱类型的语言，这意味着变量在声明时不需要指定数据类型。在我们的计算器中，我们将使用变量来存储用户的输入和计算结果。例如： ```javascript let num1 = parseFloat(prompt("请输入第一个数字：")); // 获取用户输入并转换为浮点数 let num2 = parseFloat(prompt("请输入第二个数字：")); ``` 这里的`parseFloat()`函数用于将用户的字符串输入转换为浮点数，以进行数学运算。接着，我们需要编写函数来执行各种计算操作。例如，加法可以这样实现： ```javascript function add(num1, num2) { return num1 + num2; } ``` 类似地，我们可以创建减法、乘法和除法的函数： ```javascript function subtract(num1, num2) { return num1 - num2; } function multiply(num1, num2) { return num1 * num2; } function divide(num1, num2) { if (num2 === 0) { alert("错误：除数不能为0"); return; } return num1 / num2; } ``` 对于求倒数，我们只需要返回1除以数字的结果： ```javascript function reciprocal(num) { if (num === 0) { alert("错误：0的倒数不存在"); return; } return 1 / num; } ``` 求模运算符在JavaScript中是 `%`，所以我们可以直接使用： ```javascript function modulus(num1, num2) { return num1 % num2; } ``` 对于求表达式，我们可以使用`eval()`函数，它会执行一个字符串作为JavaScript代码： ```javascript function calculateExpression(expression) { if (isNaN(expression)) { alert("错误：无效的表达式"); return; } return eval(expression); } ``` 然而，`eval()`可能存在安全风险，因为它可以执行任意代码。在实际项目中，应考虑使用更安全的方法来解析和计算表达式。在HTML中，我们需要创建一个计算器的界面，包括数字按钮、运算符按钮以及显示结果的文本框。通过JavaScript，我们可以为每个按钮添加事件监听器，当用户点击按钮时调用相应的函数。例如，我们可以这样处理加法按钮的点击事件： ```javascript document.getElementById("add-btn").addEventListener("click", function() { let result = add(num1, num2); document.getElementById("display").value = result; }); ``` 以上代码中的`getElementById()`用于获取HTML元素，`addEventListener()`用于添加事件监听器，而`value`属性则用于更新显示区域的内容。在提供的文件`text8-3-6.htm`中，我们可以找到完整的HTML结构和嵌入的JavaScript代码，用于展示这个计算器的实现。这个计算器的代码设计简洁且易于理解，是学习JavaScript和网页交互的一个很好的实践案例。通过这个项目，你可以掌握JavaScript基础，如变量、函数、条件判断、事件处理等，并了解如何将这些知识应用于实际的网页开发中。同时，这也能帮助你理解如何在安全性和用户体验之间取得平衡，以创建更高效、更健壮的Web应用。

资源推荐

资源详情

资源评论

收起资源包目录

计算器代码.rar （1个子文件）

text8-3-6.htm 5KB

<html> <head> <meta http-equiv="Content-Language" content="zh-cn"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>计算器</title> <script language="javascript"> function BackSpace(){ var suanshi suanshi=show.value if(suanshi!=""){ suanshi=suanshi.substring(0,suanshi.length-1) } show.value=suanshi } function ReSet(){ show.value="" } function DaoShu(){ if(show.value!="") show.value=1/show.value } function ZhengFu(){ var suanshi suanshi=show.value FuHao=suanshi.substring(0,1) if(FuHao=="-") suanshi=suanshi.substring(1,suanshi.length) else suanshi="-"+suanshi show.value=suanshi } function Button(a){ show.value=show.value+a } function Result(){ show.value=eval(show.value) } </script> </head> <body> <p align="center"><font size="4"> 计算器</font></p> <div align="center"> <table border="4" width="362" height="324" style="border-collapse: collapse" bordercolor="#0066CC" bgcolor="#CC99FF"> <tr> <td height="40" width="352" colspan="5" align="right"><p align="center"> <input name="show" size="20" style="width: 352; height: 40; font-size: 18pt; color:#0000FF; background-color:#99FFCC" disabled > </td> </tr> <tr> <td height="49" width="138" colspan="2" align="center"><input type="button" value="BackSpace" name="B3" style="width: 100; height: 35; font-size: 14pt" onClick="BackSpace()"> </td> <td height="49" width="133" colspan="2" align="center"><input type="button" value="ReSet" style="width: 100; height: 35; font-size: 14pt" onClick="ReSet()"></td> <td height="49" width="69" align="center"><input type="button" value="1/x" name="B5" style="width: 50; height: 35; font-size: 14pt" onClick="DaoShu()"></td> </tr> <tr> <td height="25%" width="20%" align="center"><input type="button" value="7" name="B6" style="width: 50; height: 35; font-size: 14pt" onClick="Button('7')"></td> <td height="25%" width="20%" align="center"><input type="button" value="8" name="B7" style="width: 50; height: 35; font-size: 14pt" onClick="Button('8')"></td> <td height="25%" width="20%" align="center"><input type="button" value="9" name="B8" style="width: 50; height: 35; font-size: 14pt" onClick="Button('9')"></td> <td height="25%" width="20%" align="center"><input type="button" value="/" name="B9" style="width: 50; height: 35; font-size: 14pt" onClick="Button('/')"></td> <td height="25%" width="20%" align="center"><input type="button" value="(" name="B10" style="width: 50; height: 35; font-size: 14pt" onClick="Button('(')"></td> </tr> <tr> <td height="25%" width="20%" align="center"><input type="button" value="4" name="B11" style="width: 50; height: 35; font-size: 14pt" onClick="Button('4')"></td> <td height="25%" width="20%" align="center"><input type="button" value="5" name="B12" style="width: 50; height: 35; font-size: 14pt" onClick="Button('5')"></td> <td height="25%" width="20%" align="center"><input type="button" value="6" name="B13" style="width: 50; height: 35; font-size: 14pt" onClick="Button('6')"></td> <td height="25%" width="20%" align="center"><input type="button" value="*" name="B14" style="width: 50; height: 35; font-size: 14pt" onClick="Button('*')"></td> <td height="25%" width="20%" align="center"><input type="button" value=")" name="B15" style="width: 50; height: 35; font-size: 14pt" onClick="Button(')')"></td> </tr> <tr> <td height="25%" width="20%" align="center"><input type="button" value="1" name="B16" style="width: 50; height: 35; font-size: 14pt" onClick="Button('1')"></td> <td height="25%" width="20%" align="center"><input type="button" value="2" name="B17" style="width: 50; height: 35; font-size: 14pt" onClick="Button('2')"></td> <td height="25%" width="20%" align="center"><input type="button" value="3" name="B18" style="width: 50; height: 35; font-size: 14pt" onClick="Button('3')"></td> <td height="25%" width="20%" align="center"><input type="button" value="-" name="B19" style="width: 50; height: 35; font-size: 14pt" onClick="Button('-')"></td> <td height="25%" width="20%" align="center"><input type="button" value="%" name="B20" style="width: 50; height: 35; font-size: 14pt" onClick="Button('%')"></td> </tr> <tr> <td height="25%" width="20%" align="center"><input type="button" value="0" name="B21" style="width: 50; height: 35; font-size: 14pt" onClick="Button('0')"></td> <td height="25%" width="20%" align="center"><input type="button" value="+/-" name="B22" style="width: 50; height: 35; font-size: 14pt" onClick="ZhengFu()"></td> <td height="25%" width="20%" align="center"><input type="button" value="." name="B23" style="width: 50; height: 35; font-size: 14pt" onClick="Button('.')"></td> <td height="25%" width="20%" align="center"><input type="button" value="+" name="B24" style="width: 50; height: 35; font-size: 14pt" onClick="Button('+')"></td> <td height="25%" width="20%" align="center"><input type="button" value="=" name="B25" style="width: 50; height: 35; font-size: 14pt" onClick="Result()" ></td> </tr> </table> </div> </body> </html>

评论收藏

内容反馈