使用JavaScript写成的简易计算器，正常的操作下能正确的执行功能，但测试不全面，bug应该会有的，欢迎指出。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript实现简单计算器</title>
<script type="text/javascript" src="calculator.js"></script>
<script type="text/javascript">
</script>
<style type="text/css" media="all">
.myButton{
width: 80px;
height: 30px;
}
</style>
</head>
<body>
<table border="1" align="center">
<caption style="color: red">JS简易计算器--SAILOR20100312</caption>
<tr><td><input type="text" id="showText" name="showText" size="50%" readonly="readonly"></td></tr>
<tr>
<td>
<input class="myButton" type="button" value="7" onclick="handle(this.value)">
<input class="myButton" type="button" value="8" onclick="handle(this.value)">
<input class="myButton" type="button" value="9" onclick="handle(this.value)">
<input class="myButton" type="button" value="/" onclick="handle(this.value)">
<input class="myButton" type="button" value="清零" id="reset" onclick="handle(this.value)">
</td>
</tr>
<tr>
<td>
<input class="myButton" type="button" value="4" onclick="handle(this.value)">
<input class="myButton" type="button" value="5" onclick="handle(this.value)">
<input class="myButton" type="button" value="6" onclick="handle(this.value)">
<input class="myButton" type="button" value="*" onclick="handle(this.value)">
<input class="myButton" type="button" value="取消" id="reset" onclick="handle(this.value)">
</td>
</tr>
<tr>
<td>
<input class="myButton" type="button" value="1" onclick="handle(this.value)">
<input class="myButton" type="button" value="2" onclick="handle(this.value)">
<input class="myButton" type="button" value="3" onclick="handle(this.value)">
<input class="myButton" type="button" value="-" onclick="handle(this.value)">
<input class="myButton" type="button" value="sqrt" id="sqrt" onclick="handle(this.value)">
</td>
</tr>
<tr>
<td>
<input class="myButton" type="button" value="0" size="5" onclick="handle(this.value)">
<input class="myButton" type="button" value="备用" size="5" onclick="">
<input class="myButton" type="button" value="." size="5" onclick="handle(this.value)">
<input class="myButton" type="button" value="+" onclick="handle(this.value)">
<input class="myButton" type="button" value="等于" id="equel" onclick="handle(this.value)">
</td>
</tr>
</table>
</body>
</html>
下面是js代码
/**
* 用于计算的对象
*/
function calculate(x,y){
this.mark=false;//用来记录是否开始下一个数字的输入
this.x=x;
this.y=y;
this.operator="+";//当前操作符
this.addition=function (){
return parseFloat(this.x)+parseFloat(this.y);
};
this.subtracter=function (){
return parseFloat(this.x)-parseFloat(this.y);
};
this.multiplication=function (){
return parseFloat(this.x)*parseFloat(this.y);
};
this.division=function (){
if(this.y==0){
alert("除数不能为零！");
return;
}else {
return parseFloat(this.x)/parseFloat(this.y);
}
};
this.sqrt=function (){
if(cal.y<0){
alert("负数不能开根号！");
return ;
}else{
return Math.sqrt(cal.y);
}
}
}
/**
* 在屏幕上显示操作
*/
function show(str){
var showText=$("showText");
if(!cal.mark){
if(showText.value!=0){
showText.value=showText.value+str;
}else{
showText.value=str;
}
}else{
showText.value=str;
cal.mark=false;
}
}
/**
* 每一个操作都要响应的函数
*/
function handle(str){
var figure = /\d|\./;//匹配数字
var operator=/\+|\-|\*|\/|等于/;//匹配运算符
if(figure.test(str)){
show(str);
}else if(str=="清零"){
$("showText").value="0";
cal.x=0;
cal.y=0;
cal.operator="+";
}else if(str=="取消"){
var s=new String($("showText").value);
$("showText").value=s.substring(0,s.length-1);
}
else if(operator.test(str)){
cal.y=$("showText").value.length==0 ? 0 : $("showText").value;
switch(cal.operator){
case "+" :
$("showText").value=cal.addition();cal.x=cal.addition();
break;
case "-" :
$("showText").value=cal.subtracter();cal.x=cal.subtracter();
break;
case "*" :
$("showText").value=cal.multiplication();cal.x=cal.multiplication();
break;
case "/" :
$("showText").value=cal.division();cal.x=cal.division();
break;
}
cal.operator=str;
cal.mark=true;
}else if(str=="sqrt"){
cal.y=$("showText").value;
$("showText").value=cal.sqrt();cal.x=cal.sqrt();
}
}
function $(id) {
return document.getElementById(id);
}
var cal=new calculate(0,0);
分享到：
相关推荐
用javascript编程语言编写的简易计算器，仅包含+-*/运算
本文实例为大家分享了js编写简易计算器的具体代码，供大家参考，具体内容如下 使用绑定时间触发 加减乘除 加： 减： 乘： 除： 源代码： <body> 第一个数：<input type=text id=num1 /><p></p> ...
标题中的“一个用JS做的简易计算器”表明这是一个使用JavaScript编程语言实现的基本计算器应用。JavaScript，通常简称为JS，是Web开发中广泛使用的客户端脚本语言，用于为网页添加交互性功能。在这个案例中，开发者...
总的来说，创建这个JavaScript简易计算器涉及HTML布局、CSS美化以及JavaScript逻辑实现。通过这个项目，我们可以学习到网页交互的基本原理，以及如何使用JavaScript处理用户输入并执行计算。这是一个很好的实践项目...
HTML简易计算器源代码.zip是一个包含一个简单HTML计算器的项目，主要使用了逆波兰表达式算法来处理计算逻辑，同时结合HTML、CSS和JavaScript技术来构建用户界面和交互功能。这个计算器的设计灵感来源于MIUI计算器，...
简易计算器java实训报告.pdf
通过这个“简易计算器_html_源码”案例，初学者可以了解到HTML的基础知识，包括结构、元素、事件处理以及与CSS和JavaScript的配合。同时，也可以学习到如何用HTML和JavaScript创建一个简单的交互式应用，这对于...
本人用JavaScript编写的网页计算器，有简单的各项运算，经运行调试，证明还不错。适合初学者及相关人员学习借鉴。不足之处还请大家指出。
本项目旨在通过制作一个简易计算器小程序，帮助初学者掌握小程序的基本概念、架构和开发流程，进一步了解其特点和编写方式。 一、小程序的特点 1. 轻量化：小程序占用资源少，加载速度快，用户体验流畅。 2. 靠近...
【HTML+JS简易计算器】是由前端开发者飞龙创建的一个基于Web的计算器应用，版本为v0.1。这个项目展示了如何使用HTML、CSS和JavaScript这三种核心技术来构建一个交互式的用户界面。虽然存在一些小的缺陷，但它为初学...
ASP.NET 3.5标准控件--简易计算器 ASP.NET 3.5标准控件是ASP.NET 3.5框架中的一种基本控件，用于构建Web应用程序。简易计算器是ASP.NET 3.5标准控件的一个典型应用，通过使用TextBox控件和Button控件实现基本的算术...
在本项目中，"javaEE网页版简易计算器（源码）"是一个基于JavaEE平台的Web应用程序，旨在实现一个简单的在线计算器，支持2位数之间的基本数学运算，包括加法、减法、乘法和除法。这个项目利用了MyEclipse作为开发...
【Java简易计算器实训报告】 Java简易计算器的实训项目旨在让学生深入理解和掌握Java编程语言，特别是面向对象编程技术。在这个项目中，学生需要设计并实现一个包含简易计算器和科学计算器功能的程序，以此来巩固和...
在前端开发中，运用js技术编写一个简易计算器，能够在浏览器页面实现最基本的加减乘除的功能。在前端开发中，运用js技术编写一个简易计算器，能够在浏览器页面实现最基本的加减乘除的功能。
在本文中，我们将深入探讨如何使用Vue.js框架构建一个简易计算器。Vue.js是一个轻量级、灵活且功能强大的前端开发库，它使得构建用户界面变得简单高效。标题"simplycalculatorvuejs一个用vuejs实现简易计算器"和描述...
在这个简易计算器中，"calculator(源代码).txt"文件可能包含了用某种编程语言（如Python、JavaScript或C++等）编写的源代码。源代码通常由变量声明、函数定义和控制流语句组成。 在任何计算器中，变量是用来存储...
该文描述的是一个基于HTML、CSS和JavaScript（JS）编写的简易计算器。这个计算器能够执行基本的数学运算，包括加法、减法、乘法、除法以及开平方根。以下将详细介绍其中的关键知识点： 1. **HTML**：HTML...
对于初学者来说，通过编写一个简易计算器不仅可以加深对JavaScript的理解，还能提高编程实践能力。本项目的目标是使用原生JavaScript实现一个简单的在线计算器。 #### 二、技术选型与实现原理 **1. 技术选型：** ...
"用C++制作一个简易计算器" 本文档的主要内容是设计一个简易的计算器，使用C++语言，实现基本的加减乘除运算，并且可以处理多位数的运算。下面将对标题、描述、标签和部分内容进行详细的解释和分析。 设计目的 ...