第一部分案例描述

案例目的

学习javaScript语言基础，熟练变量的声明及运算符的使用，同时通过该案例训练编程思维和逻辑。掌握按钮事件的处理，对自定义函数灵活运用

案例难度

★★★

案例覆盖技能点

1、 如何在JavaScript中声明变量

2、 如何在JavaScript中自定义函数

3、 如何为按钮添加事件

4、 如何将数据显示在文本框中

5、 JavaScript基本对象String对象的使用

6、 字符数字到数值数字的转换parseFloat

适用课程和对象

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);
        }
    }

简单计算器

第一部分 案例描述

案例目的

案例难度

案例覆盖技能点

推荐案例完成时间

适用课程和对象

相关推荐

第一部分案例描述