最近工作比较轻松,无聊的时候自己尝试写了一个简单的计算器,还望各位指正 以下为运行效果
<html> <head> <title>CalSelf.html</title> <style type="text/css"> input { width: 50px; } </style> <script type="text/javascript"> var str="" var num1; var num2; var opear; function num(no){ str=str+no; document.getElementsByTagName("input")[0].value=str; } function Clear(){ document.getElementsByTagName("input")[0].value=""; str=""; } //点击加减乘除事件 function fun(op){ //全局变量num1保存当前表框显示的数字内容 num1=parseInt(document.getElementsByTagName("input")[0].value); //全局变量保存运算符加减乘除 opear=op; if(op==1){//加 op="+" }else if(op==2){//减 op="-" }else if(op==3){//乘 op="*" }else{//除 op="/" } document.getElementsByTagName("input")[0].value=op; str=""; } //按下等号下做的事件! function calculate(){ var result; num2=parseInt(document.getElementsByTagName("input")[0].value); if(opear==1){ result=num1+num2 }else if(opear==2){ result=num1-num2 }else if(opear==3){ result=num1*num2 }else{ result=num1/num2 } num2=result; document.getElementsByTagName("input")[0].value=result; } </script> </head> <body> <input type="text" style="width: 200px;"> <table> <tr> <td><input type="button" value="1" onclick="num(1)"></td> <td><input type="button" value="2" onclick="num(2)"></td> <td><input type="button" value="3" onclick="num(3)"></td> <td><input type="button" value="+" onclick="fun(1)"></td> </tr> <tr> <td><input type="button" value="4" onclick="num(4)"></td> <td><input type="button" value="5" onclick="num(5)"></td> <td><input type="button" value="6" onclick="num(6)"></td> <td><input type="button" value="-" onclick="fun(2)"></td> </tr> <tr> <td><input type="button" value="7" onclick="num(7)"></td> <td><input type="button" value="8" onclick="num(8)"></td> <td><input type="button" value="9" onclick="num(9)"></td> <td><input type="button" value="*" onclick="fun(3)"></td> </tr> <tr> <td><input type="button" value="0" onclick="num(0)"></td> <td><input type="button" value="Clear" onclick="Clear()"></td> <td><input type="button" value="=" onclick="calculate()"></td> <td><input type="button" value="/" onclick="fun(4)"></td> </tr> </table> </body> </html>
相关推荐
7. **样式与布局**:虽然这不是纯JavaScript的功能,但为了让计算器在不同的浏览器上看起来和表现一致,开发者可能需要使用CSS来调整元素的样式和布局,确保跨浏览器兼容性。 8. **性能优化**:为了提供流畅的用户...
根据给定的文件内容,我们可以了解到一个使用纯JavaScript编写的简单网页计算器程序的知识点。这个程序允许用户进行基本的数学运算,包括加法、减法、乘法和除法。接下来,将对程序的各个组成部分进行详细说明。 1....
【标题】"纯javascript制作的简单js计算器效果.zip"是一个包含使用JavaScript编程语言实现的简易计算器项目的压缩包。这个项目可能是一个教学资源或者一个初学者的实践作品,它展示了如何利用JavaScript的基本语法和...
用JavaScript实现一个运算式的计算 a. 支持加,减,乘,除(+, -, *, /) b. 支持输入合法的数字,包括小数,不考虑非法输入和数字越界(0-9, .) sample : "3+8.3*1" 结果是11.3 ”3.2 + 0 -8.7“ 结果是-5.5 ...
【纯JavaScript的简单模拟计算器】 在前端开发中,构建一个基于JavaScript的模拟计算器是一个常见的练习,这可以帮助开发者熟悉DOM操作、事件处理以及基本的数学逻辑。在这个项目中,我们将探讨如何仅使用...
【标题】"Calculator【纯JavaScript实现的网页计算器】"是一个基于Web的项目,它使用JavaScript这一客户端脚本语言,为用户提供了类似传统桌面计算器的功能。这个项目的核心目标是利用JavaScript的强大功能,在网页...
这个简单的JavaScript计算器项目是一个很好的起点,帮助初学者理解基本的Web开发原理。通过扩展此项目,你可以添加更复杂的功能,如连续运算、括号支持、科学计算模式等,从而深入学习JavaScript和前端开发。
6. **样式和布局**:虽然这不是纯JavaScript的问题,但在实现JavaScript计算器时,我们可能还会涉及到CSS来控制计算器的外观,包括按钮的大小、颜色、边框、排列方式等。 7. **即时更新显示**:用户每次点击按钮,...
需求:制作web版计算器,要求实现+-*%和平方,开方。 2.0版:修复归零的问题 3.0版:支持正负数; 4.0版:修复多个多个运算符号导致不能计算的bug; 5.0版: 多个小数点的bug, 自然数e的问题, 0.1,0.2,0.04等...
用纯javascript做的计算器,按键功能齐全,初级水平,用来交作业吧
网页模板——纯javascript制作的简单js计算器效果是一个用于学习和实践JavaScript编程的项目。这个项目主要展示了如何使用JavaScript语言创建一个基本的计算器功能,让用户在网页上进行简单的数学运算。在这个过程中...
在本文中,我们将深入探讨如何使用纯JavaScript编写一个简单的计算器,这是学习JavaScript Web API和前端开发的一个很好的实践项目。JavaScript,作为ECMAScript规范的一部分,是网页开发中最常用的语言之一,尤其在...
在这个案例中,"js实现简单计算器"是一个使用纯JavaScript编写的计算器应用程序。这个项目旨在展示如何利用JavaScript实现基本的数学计算功能,包括加法、减法、乘法和除法。 首先,JavaScript中的基础四则运算可以...
【JavaScript计算器】是一种基于Web的计算工具,完全使用JavaScript编程语言实现。JavaScript是一种广泛用于网页开发的脚本语言,可以在客户端浏览器上运行,无需服务器端交互。本项目旨在创建一个功能齐全、用户...
插件描述:CalcSS3是一款非常酷的CSS3和js模仿iPhone样式科学计算器插件。该计算器插件没有使用图片,纯CSS制作。该计算器是科学型的,可以处理乘方、开方、指数、对数等复杂的数学运算。演示地址:...
总的来说,这个"最nb的网页版多级计算器,纯Javascript"项目展示了JavaScript在网页开发中的强大功能,包括用户交互、逻辑处理、数学运算和界面更新等方面。它不仅是一个实用的工具,也是学习JavaScript和计算原理的...
《纯JavaScript实现科学计算器》 在网页开发中,有时候我们需要为用户提供高级的计算功能,比如科学计算,这就需要用到科学计算器。本项目通过纯JavaScript技术,实现了这样一个功能丰富的科学计算器,让我们一起...
以下是使用纯JavaScript实现计算器功能的三种方法。 方法一:基本的计算器实现 首先,我们将通过创建一个简单的网页,其中包含用于输入数字和进行基本运算(加、减、乘、除)的按钮。我们将使用HTML来构建界面,CSS...
这个项目展示了如何用纯JavaScript实现一个功能完备、交互友好的计算器,其中包括连续运算和存储运算等功能。 首先,HTML负责构建计算器的用户界面,包括数字按钮、运算符按钮、清除键以及显示区域。这些元素通过`...