简单计算器
程序员文章站
2022-07-14 08:41:16
...
第一部分 案例描述
案例目的
学习javaScript语言基础，熟练变量的声明及运算符的使用，同时通过该案例训练编程思维和逻辑。掌握按钮事件的处理，对自定义函数灵活运用
案例难度
★★★
案例覆盖技能点
<!--[if !supportLists]-->1、 <!--[endif]-->如何在JavaScript中声明变量
<!--[if !supportLists]-->2、 <!--[endif]-->如何在JavaScript中自定义函数
<!--[if !supportLists]-->3、 <!--[endif]-->如何为按钮添加事件
<!--[if !supportLists]-->4、 <!--[endif]-->如何将数据显示在文本框中
<!--[if !supportLists]-->5、 <!--[endif]-->JavaScript基本对象String对象的使用
<!--[if !supportLists]-->6、 <!--[endif]-->字符数字到数值数字的转换parseFloat
推荐案例完成时间
2课时
适用课程和对象
javaScript 具备HTML编程基础的同学
html：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jisuanqi.js"></script>
<title>计算器</title>
<style>
.tbn1 tr td input
{
width:70px; height:30px;
}
</style>
</head>
<body>
<form action="#" method="post" name="firstForm">
<table border="1" class="tbn1">
<tr>
<td colspan="3"><input id="inp1" name="xianshi" type="text" style=" width:200px" value=""/></td>
<td><input type="button" id="cc" value="C" onclick="inputPCB(this)"/></td>
<td><input type="button" id="ce" value="CE"onclick="inputPCB(this)"/></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="inputEvent(this)"/></td>
<td><input type="button" value="8" onclick="inputEvent(this)"/></td>
<td><input type="button" value="9" onclick="inputEvent(this)"/></td>
<td><input type="button" value="+/-" onclick="inputOper(this)" /></td>
<td><input type="button" value="%" onclick="inputOper(this)"/></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="inputEvent(this)"/></td>
<td><input type="button" value="5" onclick="inputEvent(this)"/></td>
<td><input type="button" value="6" onclick="inputEvent(this)"/></td>
<td><input type="button" value="+" onclick="inputOper(this)"/></td>
<td><input type="button" value="-" onclick="inputOper(this)"/></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="inputEvent(this)"/></td>
<td><input type="button" value="2" onclick="inputEvent(this)"/></td>
<td><input type="button" value="3" onclick="inputEvent(this)"/></td>
<td><input type="button" value="*" onclick="inputOper(this)"/></td>
<td><input type="button" value="/" onclick="inputOper(this)"/></td>
</tr>
<tr>
<td><input type="button" value="0" onclick="inputEvent(this)" /></td>
<td><input type="button" value="." /></td>
<td></td>
<td><input type="button" value="=" onclick="inputEquel(this)" /></td>
<td><input type="button" value="返回" /></td>
</tr>
</table>
</form>
</body>
</html>
js：
// JavaScript Document
/* 定义一个Calculator类*/
function Calculator(){
this.jisuan=function(num1,num2,oper){
var res=0;
switch(oper){
case "+":
res=num1+num2;
break;
case "-":
res=num1-num2;
break;
case "*":
res=num1*num2;
break;
case "/":
res=num1/num2;
break;
case "%":
res=num1%num2;
break;
}
return res;
}
}
//创建对象
var calculator=new Calculator();
/*定义全局变量*/
var val=0; //放置输入的值
var xval=0;//保存转换Number类型的值
var temp=0; //保存第一次输入的值
var oper="";//保存输入的操作符
function inputEvent(e){
val=e.value
var xsval=document.getElementById("inp1");
xsval.value+=val; //连续输入数字(String类型)
//window.alert(e.value);
//转换Number类型
xval=parseFloat(xsval.value);
}
/*获取第一行的数据*/
function inputPCB(e){
//window.alert(e.value);
var xsval=document.getElementById("inp1");
if(e.value=="C"){
xsval.value="";
}else if(e.value=="CE"){
//退一个
//window.alert(xsval.value);
var itSelf = xsval.value;
xsval.value = itSelf.substring(0,itSelf.length-1);
}
}
/*输入操作符*/
function inputOper(e){
oper=e.value;
if (e.value=="+"){
var xsval=document.getElementById("inp1");
//保存上次计算结果，并对字符串进行转换Number类型
temp=parseFloat(xsval.value);
//第一次输入的值设置为空
xsval.value="";
}else if(e.value=="-"){
var xsval=document.getElementById("inp1");
temp=parseFloat(xsval.value);
xsval.value="";
}else if(e.value=="*"){
var xsval=document.getElementById("inp1");
temp=parseFloat(xsval.value);
xsval.value="";
}else if(e.value=="/"){
var xsval=document.getElementById("inp1");
temp=parseFloat(xsval.value);
xsval.value="";
}
}
/*计算结果*/
function inputEquel(e){
var xsval=document.getElementById("inp1");
if(e.value=="="){
//window.alert(xval);
//调用对象方法
xsval.value=calculator.jisuan(temp,xval,oper);
}
}
下一篇： java中double型数据四舍五入