JavaScript面向对象编程----计算器_追梦人_百度空间

使用JavaScript写成的简易计算器,正常的操作下能正确的执行功能,但测试不全面,bug应该会有的,欢迎指出。这是页面部分代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<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部分,calculator.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面向对象编程----计算器_追梦人_百度空间】由 发布,版权归原作者及其所在单位,其原创性以及文中陈述文字和内容未经(企业库qiyeku.com)证实,请读者仅作参考,并请自行核实相关内容。若本文有侵犯到您的版权, 请你提供相关证明及申请并与我们联系(qiyeku # qq.com)或【在线投诉】,我们审核后将会尽快处理。
—— 相关资讯 ——