简单计算器
第一部分 案例描述
案例目的
学习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); } }
相关推荐
nmgxzm00 2020-11-10
ifconfig 2020-10-14
hhanbj 2020-11-17
zfszhangyuan 2020-11-16
古叶峰 2020-11-16
一个智障 2020-11-15
jipengx 2020-11-12
81427005 2020-11-11
xixixi 2020-11-11
游走的豚鼠君 2020-11-10
苗疆三刀的随手记 2020-11-10
Web卓不凡 2020-11-03
小飞侠V 2020-11-02
帕尼尼 2020-10-30
爱读书的旅行者 2020-10-26
帕尼尼 2020-10-23
杏仁技术站 2020-10-23
淼寒儿 2020-10-22