自己用Javascript和Html写的一个简单计算器资源-CSDN下载

共3个文件

html：1个

css：1个

js：1个

Javascript和Html写的一个简单计算器

4星 · 超过85%的资源需积分: 50 161 浏览量 2008-11-24 15:46:45 上传评论 5 收藏 2KB RAR 举报

在本项目中，我们探索的是如何使用HTML、CSS和JavaScript技术构建一个基本的计算器应用。这个简单的计算器由一个初级开发者创建，旨在展示基础的前端开发技能。以下是对这个项目涉及的知识点的详细说明： 1. **HTML（HyperText Markup Language）**：HTML是构建网页的基础，用于定义页面结构。在这个计算器中，HTML会创建按钮（用于数字和运算符）以及显示计算结果的区域。例如，`<input>`元素通常用来创建可交互的文本框，显示用户的输入和计算结果。 2. **CSS（Cascading Style Sheets）**：CSS用于控制网页的样式和布局。在这个计算器上，CSS可以用来设置按钮的颜色、大小、边框、字体样式等，以及整体界面的布局，使计算器看起来更吸引人并易于使用。 3. **JavaScript**：JavaScript是实现计算器功能的核心，负责处理用户与页面的交互。例如，当用户点击数字或运算符按钮时，JavaScript会捕获事件，更新显示的数值或执行相应的计算。JavaScript中的关键概念包括： - **事件监听器（Event Listeners）**：用于捕捉用户点击按钮的动作。 - **DOM（Document Object Model）**：JavaScript通过DOM操作HTML元素，如获取、修改或添加元素。 - **变量（Variables）**：存储当前计算状态，如数字、运算符等。 - **条件语句（Conditional Statements）**：根据用户输入的运算符进行不同的计算逻辑，如加法、减法、乘法和除法。 - **循环（Loops）**：在某些复杂的计算中可能需要用到，但在这个简单的计算器中可能不涉及。 - **函数（Functions）**：封装重复或特定的逻辑，如计算结果。 4. **事件处理程序**：在JavaScript中，事件处理程序定义了当特定事件发生时应执行的代码。例如，`addEventListener`方法可以添加事件监听器，当用户点击按钮时调用预定义的函数。 5. **计算逻辑**：计算器的核心是其计算逻辑，这通常涉及到数学运算。JavaScript提供了内置的数学函数，如`Math.add()`、`Math.subtract()`、`Math.multiply()`和`Math.divide()`，但在这个项目中，开发者可能选择使用自定义的函数来实现这些操作，以提高学习和理解过程。 6. **用户界面设计**：虽然这是一个简单的项目，但良好的用户体验（UX）设计仍然重要。这包括按钮的尺寸和位置，以及结果显示的清晰度。开发者可能需要考虑如何优化按钮的触摸响应，特别是对于移动设备。 7. **错误处理**：一个完整的计算器应用还需要处理可能的错误情况，比如除以零的异常，或者输入非法字符时的提示。通过这个项目，初学者可以学习到前端开发的基本流程，包括如何将HTML、CSS和JavaScript结合在一起创建一个功能性的交互式应用程序。同时，这也是一个很好的练习，可以帮助开发者理解DOM操作、事件处理以及基本的数学计算逻辑。

资源推荐

资源详情

资源评论

收起资源包目录

.rar （3个子文件）

计算器

jisuanqi.js 7KB

jisuanqi.html 3KB

jisuanqi.css 302B

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>网页计算器</title> <link href="jisuanqi.css" rel="stylesheet" type="text/css" /> </head> <body> <script type="text/javascript" src='jisuanqi.js'> </script> <table border="2px"> <caption> 简单的网页计算器 <br> </caption> <tr> <td colspan="4" bordercolor="#CC66CC"><input class="a" type="text" name="getbiaodashi" style="text-align:right;" value="0"></td> </tr> <tr > <td colspan="3" bordercolor="#CC66CC"><input class="b" type="text" readonly="true" name="result" style="text-align:right;" value="0"></td> <td bordercolor="#CC66CC"><input type="button" name="jiecheng" value="求阶乘" onClick="jiecheng()"></td> </tr> <tr > <td bordercolor="#CC66CC"><input type="button" name="bt1" value="1" onClick="getBiaodashi(bt1.value)"></td> <td bordercolor="#CC66CC"><input type="button" name="bt2" value="2" onClick="getBiaodashi(bt2.value)"></td> <td bordercolor="#CC66CC"><input type="button" name="bt3" value="3" onClick="getBiaodashi(bt3.value)"></td> <td bordercolor="#CC66CC"><input type="button" name="add" value="＋" onClick="getBiaodashi(add.value)"></td> </tr> <tr > <td bordercolor="#CC66CC"><input type="button" name="bt4" value="4" onClick="getBiaodashi(bt4.value)"></td> <td bordercolor="#CC66CC"><input type="button" name="bt5" value="5" onClick="getBiaodashi(bt5.value)"></td> <td bordercolor="#CC66CC"><input type="button" name="bt6" value="6" onClick="getBiaodashi(bt6.value)"></td> <td bordercolor="#CC66CC"><input type="button" name="jian" value="－" onClick="getBiaodashi(jian.value)"></td> </tr> <tr align="center"> <td bordercolor="#CC66CC"><input type="button" name="bt7" value="7" onClick="getBiaodashi(bt7.value)"></td> <td bordercolor="#CC66CC"><input type="button" name="bt8" value="8" onClick="getBiaodashi(bt8.value)"></td> <td bordercolor="#CC66CC"><input type="button" name="bt9" value="9" onClick="getBiaodashi(bt9.value)"></td> <td bordercolor="#CC66CC"><input type="button" name="cheng" value="×" onClick="getBiaodashi(cheng.value)"></td> </tr> <tr > <td bordercolor="#CC66CC"><input type="button" name="bt0" value="0" onClick="getBiaodashi(bt0.value)"></td> <td bordercolor="#CC66CC"><input type="button" name="dian" value="." onClick="getBiaodashi(dian.value)"></td> <td bordercolor="#CC66CC"><input type="button" name="jisuan" value="=" onClick="getBiaodashi(jisuan.value)"></td> <td bordercolor="#CC66CC"><input type="button" name="chu" value="÷" onClick="getBiaodashi(chu.value)"></td> </tr> <tr > <td bordercolor="#CC66CC"><input type="button" name="left" value="(" onClick="getBiaodashi(left.value)"></td> <td bordercolor="#CC66CC"><input type="button" name="right" value=")" onClick="getBiaodashi(right.value)"></td> <td bordercolor="#CC66CC"><input type="button" name="ce" value="CE" onClick="getBiaodashi(ce.value)"></td> <td bordercolor="#CC66CC"><input type="button" name="back" value="back" onClick="getBiaodashi(back.value)"></td> </tr> </table> </body> </html>

评论收藏

内容反馈