简易计算器的制作(JavaScript)

最新推荐文章于 2024-07-25 11:52:08 发布

小胡爱代码

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量974

点赞数 2

分类专栏：简易计算器文章标签： JavaScript 计算器界面设计事件处理数值计算

本文链接：https://blog.csdn.net/XKA_HRX/article/details/115338225

版权

简易计算器专栏收录该内容

2 篇文章 0 订阅

订阅专栏

简易计算器(运用JavaScript)

实现的页面如下：

1.界面

外层外层用宽度为4px的线条框住计算器主界面

整个计算器宽为700px，长为500px

 .whole {
            border:4px solid #1687a7;
            margin-top: 150px;
            margin-left: 400px;
            width: 700px;
            height: 500px;
        }

2.结构

分为三层结构：

1.输入数字

 <div>
     <div class="innerDiv">
       数字1：<input id="num1" type="number" placeholder="请输入数字1" style="border:3px solid #1687a7" >
     </div>
     <div class="innerDiv">
       数字2：<input id="num2" type="number" placeholder="请输入数字2" style="border:3px solid #1687a7">
     </div>
 </div>

2.功能区

 <div>
    <div  class="innerDiv">
       <input type="button" onclick="f(1)" value="相加" >
       <input type="button" onclick="f(2)" value="相减">
       <input type="button" onclick="f(3)" value="相乘">
       <input type="button" onclick="f(4)" value="清空">
     </div>

  </div>

3.结果显示区

 <div class="innerDiv" >
       <label for="reset"></label><input type="text" id="reset" value="计算的结果：" style="height: 50px;width: 250px; border:3px solid #1687a7;" readonly="readonly" >
 </div>

3.按钮点击事件

1.输入数字

首先判空

if(num1.val()===""){
    alert("请先输入数字1！");
    num1.focus();
    return false;
 }
 if(num2.val()===""){
    alert("请先输入数字2！");
    num2.focus();
    return false;
 }

2.加减乘及清空操作（运用JavaScript）

 <script>
            function f(type) {
                var num1 =  jQuery("#num1");
                var num2 =  jQuery("#num2");
                var result = 0;
                if(type===1){//加法操作
                    if(num1.val()===""){
                        alert("请先输入数字1！");
                        num1.focus();
                        return false;
                    }
                    if(num2.val()===""){
                        alert("请先输入数字2！");
                        num2.focus();
                        return false;
                    }
                    result = parseInt(num1.val())+parseInt(num2.val());
                    jQuery("#reset").val("计算的结果是："+result);

                }else if (type === 2) {//减法操作
                    if(num1.val()===""){
                        alert("请先输入数字1！");
                        num2.focus();
                        return false;
                    }
                    if(num2.val()===""){
                        alert("请先输入数字2！");
                        num2.focus();
                        return false;
                    }
                    result = parseInt(num1.val()) -parseInt(num2.val());
                    jQuery("#reset").val("计算的结果是："+result);
                }else if(type===3){//乘法操作
                    if(num1.val()===""){
                        alert("请先输入数字1！");
                        num1.focus();
                        return false;
                    }
                    if(num2.val()===""){
                        alert("请先输入数字2！");
                        num2.focus();
                        return false;
                    }
                     result = parseInt(num1.val()) * parseInt(num2.val());
                    jQuery("#reset").val("计算的结果是："+result);
                }else if(type===4){//清空
                    if(confirm("确定清除？")){
                        num1.val("");

                        num2.val("");
                        jQuery("#reset").val("计算的结果：");
                    }
                }
            }
</script>

4.整体实现

<html>
    <head>
        <meta charset="utf-8">
        <title>简易计算器</title>
        <script src="jquery-1.9.1.min.js"></script>
        <script>
            function f(type) {
                var num1 =  jQuery("#num1");
                var num2 =  jQuery("#num2");
                var result = 0;
                if(type===1){//加法操作
                    if(num1.val()===""){
                        alert("请先输入数字1！");
                        num1.focus();
                        return false;
                    }
                    if(num2.val()===""){
                        alert("请先输入数字2！");
                        num2.focus();
                        return false;
                    }
                    result = parseInt(num1.val())+parseInt(num2.val());
                    jQuery("#reset").val("计算的结果是："+result);

                }else if (type === 2) {//减法操作
                    if(num1.val()===""){
                        alert("请先输入数字1！");
                        num2.focus();
                        return false;
                    }
                    if(num2.val()===""){
                        alert("请先输入数字2！");
                        num2.focus();
                        return false;
                    }
                    result = parseInt(num1.val()) -parseInt(num2.val());
                    jQuery("#reset").val("计算的结果是："+result);
                }else if(type===3){//乘法操作
                    if(num1.val()===""){
                        alert("请先输入数字1！");
                        num1.focus();
                        return false;
                    }
                    if(num2.val()===""){
                        alert("请先输入数字2！");
                        num2.focus();
                        return false;
                    }
                     result = parseInt(num1.val()) * parseInt(num2.val());
                    jQuery("#reset").val("计算的结果是："+result);
                }else if(type===4){//清空
                    if(confirm("确定清除？")){
                        num1.val("");

                        num2.val("");
                        jQuery("#reset").val("计算的结果：");
                    }
                }
            }
        </script>

    </head>
    <body class="whole">
        <div style="text-align: center;margin-top: 80px;">
            <span style="font-size: 60px;color: #1687a7" >计算器</span>
        </div>
        <div>
            <div class="innerDiv">
                数字1：<input id="num1" type="number" placeholder="请输入数字1" style="border:3px solid #1687a7" >
            </div>
            <div class="innerDiv">
                数字2：<input id="num2" type="number" placeholder="请输入数字2" style="border:3px solid #1687a7">
            </div>
        </div>
        <div>
            <div  class="innerDiv">
                <input type="button" onclick="f(1)" value="相加" >
                <input type="button" onclick="f(2)" value="相减">
                <input type="button" onclick="f(3)" value="相乘">
                <input type="button" onclick="f(4)" value="清空">
            </div>
            <div class="innerDiv" >
                <label for="reset"></label><input type="text" id="reset" value="计算的结果：" style="height: 50px;width: 250px; border:3px solid #1687a7;" readonly="readonly" >
            </div>
        </div>

    </body>
    <style>
        .whole {
            border:4px solid #1687a7;
            margin-top: 150px;
            margin-left: 400px;
            width: 700px;
            height: 500px;
        }

        .innerDiv{

            text-align: center;
            margin-top: 20px;
        }
    </style>
</html>

小胡爱代码

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
简易计算器的制作(JavaScript)

目录简易计算器(运用JavaScript)1.界面3.结构4.按钮点击事件5.整体实现简易计算器(运用JavaScript)实现的页面如下：1.界面外层外层用宽度为4px的线条框住计算器主界面整个计算器宽为700px，长为500px.whole { border:4px solid #1687a7; margin-top: 150px; margin-left: 400p...
复制链接

扫一扫

专栏目录