JS编写的简易计算器

最新推荐文章于 2021-06-29 06:24:15 发布

zpsailor

最新推荐文章于 2021-06-29 06:24:15 发布

阅读量347

点赞数

分类专栏： JS原创文章标签： JavaScript CSS HTML ViewUI

JS原创专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用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" οnclick="handle(this.value)">
<input class="myButton" type="button" value="8" οnclick="handle(this.value)">
<input class="myButton" type="button" value="9" οnclick="handle(this.value)">
<input class="myButton" type="button" value="/" οnclick="handle(this.value)">
<input class="myButton" type="button" value="清零" id="reset" οnclick="handle(this.value)">
</td>
</tr>
<tr>
<td>
<input class="myButton" type="button" value="4" οnclick="handle(this.value)">
<input class="myButton" type="button" value="5" οnclick="handle(this.value)">
<input class="myButton" type="button" value="6" οnclick="handle(this.value)">
<input class="myButton" type="button" value="*" οnclick="handle(this.value)">
<input class="myButton" type="button" value="取消" id="reset" οnclick="handle(this.value)">
</td>
</tr>
<tr>
<td>
<input class="myButton" type="button" value="1" οnclick="handle(this.value)">
<input class="myButton" type="button" value="2" οnclick="handle(this.value)">
<input class="myButton" type="button" value="3" οnclick="handle(this.value)">
<input class="myButton" type="button" value="-" οnclick="handle(this.value)">
<input class="myButton" type="button" value="sqrt" id="sqrt" οnclick="handle(this.value)">
</td>
</tr>
<tr>
<td>
<input class="myButton" type="button" value="0" size="5" οnclick="handle(this.value)">
<input class="myButton" type="button" value="备用" size="5" οnclick="">
<input class="myButton" type="button" value="." size="5" οnclick="handle(this.value)">
<input class="myButton" type="button" value="+" οnclick="handle(this.value)">
<input class="myButton" type="button" value="等于" id="equel" οnclick="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);

zpsailor

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS编写的简易计算器

使用JavaScript写成的简易计算器，正常的操作下能正确的执行功能，但测试不全面，bug应该会有的，欢迎指出。&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;&lt...
复制链接

扫一扫