jQuery仿苹果手机版计算器-练手项目

最新推荐文章于 2023-05-06 13:35:51 发布

george-pang

最新推荐文章于 2023-05-06 13:35:51 发布

阅读量971

点赞数 1

分类专栏： Web前端文章标签： jQuery js 计算器

本文链接：https://blog.csdn.net/qq_34753923/article/details/81772905

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这几天在看jQuery，试着写了一个仿苹果手机版计算器的练手项目，目前功能还有些bug，不能实现连续运算，输入两个数后必须点击=号才能继续输入第三个数继续运算（希望有大神可以指正改进的办法）。实现效果图如下：

代码如下：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习-在线计算器</title>
    <link rel="stylesheet" type="text/css" href="calculator.css">
</head>
<body>
    <div class="cal-container">
        <table class="cal">
            <tbody>
            <tr id="tr1">
                <td colspan="4"><input type="text" value="0" readonly id="resultIpt"></td>
            </tr>
            <tr  id="tr2">
                <td><input type="button" value="AC" class="spe-operator" id="btn-clear"></td>
                <td><input type="button" value="+/-" class="spe-operator" id="btn-negate"></td>
                <td><input type="button" value="%" class="spe-operator" id="btn-percent"></td>
                <td><input type="button" value="÷" style="color: #fff;" class="operator"></td>
            </tr>
            <tr  id="tr3">
                <td><input type="button" value="7"  style="color: #fff;" class="num"></td>
                <td><input type="button" value="8"  style="color: #fff;" class="num"></td>
                <td><input type="button" value="9"  style="color: #fff;" class="num"></td>
                <td><input type="button" value="×"  style="color: #fff;" class="operator"></td>
            </tr>
            <tr id="tr4">
                <td><input type="button" value="4"  style="color: #fff;" class="num"></td>
                <td><input type="button" value="5"  style="color: #fff;" class="num"></td>
                <td><input type="button" value="6"  style="color: #fff;" class="num"></td>
                <td><input type="button" value="-"  style="color: #fff;" class="operator"></td>
            </tr>
            <tr id="tr5">
                <td><input type="button" value="1"  style="color: #fff;" class="num"></td>
                <td><input type="button" value="2"  style="color: #fff;" class="num"></td>
                <td><input type="button" value="3"  style="color: #fff;" class="num"></td>
                <td><input type="button" value="+"  style="color: #fff;" class="operator"></td>
            </tr>
            <tr id="tr6">
                <td colspan="2"><input type="button" value="0" style="color: #fff;" id="zero" class="num"></td>
                <td><input type="button" value="." style="color: #fff;" id="decimal-point" class="num"></td>
                <td><input type="button" value="=" style="color: #fff;" class="btn-equal"></td>
            </tr>
            </tbody>
        </table>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script src="calculator.js"></script>
</body>
</html>

CSS：

* {
  margin: 0;
  padding: 0;
}
input {
  border: 0;
  outline: none;
  cursor: pointer;
}
.cal-container {
  margin: 100px auto;
  width: 332px;
  padding: 40px 20px 20px;
  background-color: #000;
}
.cal-container .cal {
  width: 100%;
}
.cal-container tr td {
  height: 80px;
  width: 83px;
  /*浏览器中为啥少了3px*/
  color: #fff;
  padding: 10px;
  box-sizing: border-box;
}
.cal-container tr .operator {
  background-color: #f88f0a;
}
.cal-container tr .spe-operator {
  background-color: rgba(200, 200, 200, 0.8);
}
.cal-container input {
  width: 100%;
  height: 100%;
  border-radius: 50px;
  overflow: hidden;
  font-size: 24px;
  background-color: rgba(100, 100, 100, 0.6);
}
#tr1 td input {
  background-color: #000;
  color: #fff;
  text-align: right;
  font-size: 45px;
  border-radius: 0;
}
#tr6 td #zero {
  text-align: left;
  padding-left: 26px;
}
/*# sourceMappingURL=calculator.css.map */

JS：

//设置初始状态值
var resultIpt=$("#resultIpt");
var result="";
var num1="";
var num2="";
var operator_id=0;
var point_count=0;
var equ_num=0;
var zero_count=0;
//获取对象赋给变量
var num=$(".num");  //伪数组
var operator=$(".operator");
var equal=$(".btn-equal");
var btn_clear=$("#btn-clear");
var negate=$("#btn-negate"),negate_num=1;
var percent=$("#btn-percent");

//+/-键
negate.on("click",function () {
    result=resultIpt.val();
    if (result=="0"){
        result="-0";
    }else if(result=="-0"){
        result="0";
    }else{    //绝对值非0时
        result=-result;
    }
    resultIpt.val(result);
});

//数字键
num.on("click",function () {
    var num_val = $(this).val();
    result = resultIpt.val();
    if (equ_num==0){   //没有等号计算
        result = resultIpt.val();
    } else if (equ_num>0&&zero_count==0){    //每次等号计算执行一次下列代码
        resultIpt.val("0");
        point_count=0;
        result=resultIpt.val();
    }


    if (result.length==1 ) {
        if (num_val != ".") {  //如果为小数点以外的数字
            if (result == "0") {   //当为0时，覆盖
                result = "";
                result = num_val;
                zero_count=1;  //避免重复执行上面equ_num>0下的代码

                // console.log(result);
            } else {              //当不为0时，追加
                result += num_val;
                // console.log(result);

            }
        } else if (num_val == "." && point_count == 0) {
            result += num_val;
            // console.log(result);
            point_count = 1;
        }
    }else if(result.length>1){

        if (num_val=="."){
            if (point_count==0){
                result += num_val;
                point_count=1;
            }else if(point_count>0){
                result=result;
            }
        } else{
            if (result=="-0"){
                result="-"+num_val;
            }else{
                result +=num_val;
            }
        }
    }
    resultIpt.val(result);
    //控制输入位数，最多输入6位
    var result_cur=resultIpt.val();
    if (result_cur.length>=6) {
        // console.log(result_cur);
        // console.log(typeof (result_cur));
        result_cur=result_cur.substring(0, 6); //返回的是新字符串，原字符串没变，所以得重新排序
        resultIpt.val(result_cur);
    }

});

//运算符
operator.on("click",function () {
    var operator_val=$(this).val();
    // console.log(operator_val);
    if(operator_val=="+"){
        operator_id=1;
    }
    if(operator_val=="-"){
        operator_id=2;
    }
    if(operator_val=="×"){
        operator_id=3;
    }
    if(operator_val=="÷"){
        operator_id=4;
    }
    // console.log(operator_id);
    if(num1==""){
        num1= eval(resultIpt.val());//js eval()方法，计算字符串，并执行其中js代码
    }
    resultIpt.val("0");
    point_count=0; //可以重新输入小数点
});

//等于
equal.on("click",function () {
    result=resultIpt.val();
    if (result=="0"){
        if (num1=="") {  //没有输入第一个数，直接点=
            result=0;
        }else{          //输入了第一个数,按了运算符后重设为0
            result=num1;
        }
    } else {   //当只输入了第一个数，没有按运算符或者输入了第2个数时
        num2=eval(result);
        // console.log(num1);       //""--输入了第一个数，但没点运算符，此时num1为空字符串
        console.log(num2);       //99
        switch (operator_id) {
            case 0:  //没有按+—*/时
                result=eval(result);
                console.log(result);
                break;
            case 1:
                result=num1+num2;
                break;
            case 2:
                result=num1-num2;
                break;
            case 3:
                result=num1*num2;
                break;
            case 4:
                result=num1/num2;
                break;
        }
    }
    result=eval(result);
    num1=result;
    console.log(result);
    resultIpt.val(result);
    equ_num++;
    zero_count=0;
    // operator_id=0;
    point_count=0;//可以重新输入小数点
});

//清0--回归初始状态
btn_clear.on("click",function () {
    result="";
    num1="";
    num2="";
    operator_id=0;
    point_count=0;
    equ_num=0;
    resultIpt.val("0");
});

//百分比
percent.on("click",function () {
    result=resultIpt.val();
    result=eval(result)/100;
    resultIpt.val(result);
});

//控制显示位数

个人学习中练手项目，可能还有不少bug没有发现，欢迎各路大神指正和指导。

george-pang

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery仿苹果手机版计算器-练手项目

这几天在看jQuery，试着写了一个仿苹果手机版计算器的练手项目，目前功能还有些bug，不能实现连续运算，输入两个数后必须点击=号才能继续输入第三个数继续运算（希望有大神可以指正改进的办法）。实现效果图如下：代码如下：HTML：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charse...
复制链接

扫一扫