0
0

JavaScript实现简单计算器

一、两个输入框输入数值计算

步骤

1、编写html代码，实现计算器页面视图效果

2、编写js，实现点击输入数字和符号输出结果

1、编写html

1.1定义两个输入框和一个隐藏框。

1.2定义加减乘除四个按钮，并在里面设置一个单击事件onclick，单击后调用clac()函数，并将运算符号传递给函数。

1.3定义0-9十个按钮，并在里面设置一个单击事件onclick，单击后调用click1()函数，并将数字传递给函数。

1.4定义一个计算按钮，并在里面设置一个单击事件onclick，单击后调用result()函数，计算出结果。

1.5定义一个清空按钮，并在里面设置一个单击事件onclick，单击后调用click2()函数，将输入框的内容清空。

在<body></body>主体中编写html以下代码：

第一个数:<input type="number" name="num1" id="num1" /><br />
第二个数:<input type="number" name="num2" id="num2" /><br />
<input type="hidden" name="num3" id="num3" />//隐藏框，type="hidden"
<input type="button" value="加" onclick="clac('+')" />
<input type="button" value="减" onclick="clac('-')" />
<input type="button" value="乘" onclick="clac('*')" />
<input type="button" value="除" onclick="clac('/')" />
<br />
<input type="button" value="1" onclick="click1(1)" />
<input type="button" value="2" onclick="click1(2)" />
<input type="button" value="3" onclick="click1(3)" />
<input type="button" value="4" onclick="click1(4)" />
<input type="button" value="5" onclick="click1(5)" />
<br />
<input type="button" value="6" onclick="click1(6)" />
<input type="button" value="7" onclick="click1(7)" />
<input type="button" value="8" onclick="click1(8)" />
<input type="button" value="9" onclick="click1(9)" />
<input type="button" value="0" onclick="click1(0)" /><br />
<input type="button" value="计算" onclick="result()" />
<input type="button" value="清空" onclick="click2()" />

2、编写js

2.1定义一个flag标志，并赋值为true，当点击计算符号之后，改变flag的值为false。

2.2创建click1函数，判断flag的值，如果是true就定位到第一个输入框，如果是false就定位到第二个输入框，将点击传过来的值与输入框里面的字符串拼接到一起。

document.querySelector()，进行html定位，如果是用class属性来定位，定位时class属性值前面要加点号(.)，如果是用id属性来定位，定位时id属性值前面要加#。

可以使用.value取出这个属性的value值。

function click1(num){
    if(flag){
        var num1=document.querySelector("#num1");
        num1.value+=num;
    }else{
        var num2=document.querySelector("#num2");
        num2.value+=num;
    }            
}

2.3创建clac函数，定位到隐藏框，将点击传过来的符号放入输入框，并将flag值改为false。

function clac(s){
    var d=document.querySelector("#num3");
    d.value=s;
    flag=false;
}

2.4定义result函数，定位到两个输入框，取出其中的值并转成整数，定位到隐藏输入框，取出里面的符号，然后判断是什么符号，进行相应的运算，弹出运算结果。

function result(){
    var num1=parseInt(document.querySelector("#num1").value);
    var num2=parseInt(document.querySelector("#num2").value);
    var d=document.querySelector("#num3").value;
    switch (d){
        case '+':
            alert(num1+num2);
            break;
        case '-':
            alert(num1-num2);
            break;
        case '*':
            alert(num1*num2);
            break;
        case '/':
            alert(num1/num2);
            break;
        default:
            alert("输入有误")
            break;
    }
}

2.5创建click2函数，定位三个输入框，并复制为空。

function click2(){
    document.querySelector("#num1").value="";
    document.querySelector("#num2").value="";
    document.querySelector("#num3").value="";
}

在<script></script>标签中编写以下JavaScript代码 ：

<script type="text/javascript">
    var flag=true;
    function clac(s){
        var d=document.querySelector("#num3");
        d.value=s;
        flag=false;
    }
    function click1(num){
        if(flag){
            var num1=document.querySelector("#num1");
            num1.value+=num;
        }else{
            var num2=document.querySelector("#num2");
            num2.value+=num;
        }
        
    }
    
    function result(){
        var num1=parseInt(document.querySelector("#num1").value);
        var num2=parseInt(document.querySelector("#num2").value);
        var d=document.querySelector("#num3").value;
        switch (d){
            case '+':
                alert(num1+num2);
                break;
            case '-':
                alert(num1-num2);
                break;
            case '*':
                alert(num1*num2);
                break;
            case '/':
                alert(num1/num2);
                break;
            default:
                alert("输入有误")
                break;
        }
    }
    function click2(){
        document.querySelector("#num1").value="";
        document.querySelector("#num2").value="";
        document.querySelector("#num3").value="";
    }
</script>

**效果图如下 **

二、一个输入框输入数值和符号并计算

页面html代码如下：

<input type="text" id="num1" />
<br/>
<input type="button" value="+" onclick="click2('+')"/>
&nbsp;
<input type="button" value="-" onclick="click2('-')"/>
&nbsp;
<input type="button" value="*" onclick="click2('*')"/>
&nbsp;
<input type="button" value="/" onclick="click2('/')"/>
&nbsp;
<br/>
<input type="button" value="1" onclick="click1(1)"/>
&nbsp;
<input type="button" value="2" onclick="click1(2)"/>
&nbsp;
<input type="button" value="3" onclick="click1(3)"/>
&nbsp;
<input type="button" value="4" onclick="click1(4)"/>
&nbsp;
<input type="button" value="5" onclick="click1(5)"/>
&nbsp;
<br/>
<input type="button" value="6" onclick="click1(6)"/>
&nbsp;
<input type="button" value="7" onclick="click1(7)"/>
&nbsp;
<input type="button" value="8" onclick="click1(8)"/>
&nbsp;
<input type="button" value="9" onclick="click1(9)"/>
&nbsp;
<input type="button" value="0" onclick="click1(0)"/>
&nbsp;
<br/>
<br/>
<input type="button" value="计算" onclick="eq()"/>
&nbsp;
<input type="button" value="清空" onclick="reset()"/>

JavaScript代码如下： 

<script type="text/javascript">
    var num1;
    function click1(num){
        num1=document.querySelector("#num1");
        num1.value+=num;
    }
    function click2(s){
        num1=document.querySelector("#num1");//定位到输入框
        var lasts=num1.value.charAt(num1.value.length-1);//取出输入框中字符串的最后一个字符，即运算符
        var ss=(lasts=='+'||lasts=='-'||lasts=='*'||lasts=='/');
        if(num1.value!=""&&!ss){
            num1.value+=s;
        }
    }
    function eq(){
        var n1="";
        var n2="";
        var s1=""
        num1=document.querySelector("#num1");
        num1.value+="=";
    
        var j=0;
        //循环遍历字符串
        for(i in num1.value){
            var m=num1.value[j];
            if(m=="+"||m=="-"||m=="*"||m=="/"){//判断是否是运算符，是的话执行以下语句
                n1=num1.value.substring(0,j);//截取运算符前面的字符串
                s1=num1.value[j];//获取运算符
                n2=num1.value.substring(j+1,num1.value.length-1);//获取运算符后面的字符串
                break;
            }
            j++;
        }
        //将截取的字符串转成整数
        n1=parseInt(n1);
        n2=parseInt(n2);
        switch (s1){
            case "+":
                num1.value+=(n1+n2);
                break;
            case "-":
                num1.value+=(n1-n2);
                break;
            case "*":
                num1.value+=(n1*n2);
                break;
            case "/":
                num1.value+=(n1/n2);
                break;
            default:
                break;
        }
    }
    function reset(){
        num1=document.querySelector("#num1");
        num1.value="";
    }
    
</script>

**效果图如下 **

三、 两个数值、符号、结果分别一个输入框

html代码如下：

第一个值：<input type="number" class="clear" id="num1" /><br />
<input type="button" value="1" onclick="click1(1)" />
<input type="button" value="2" onclick="click1(2)" />
<input type="button" value="3" onclick="click1(3)" />
<input type="button" value="4" onclick="click1(4)" />
<input type="button" value="5" onclick="click1(5)" />
<input type="button" value="6" onclick="click1(6)" />
<input type="button" value="7" onclick="click1(7)" />
<input type="button" value="8" onclick="click1(8)" />
<input type="button" value="9" onclick="click1(9)" />
<input type="button" value="0" onclick="click1(0)" />
<input type="button" value="清除" onclick="reset1()" />
<hr /> 运算方法：
<input type="text" id="num3" /><br />
<input type="button" value="加" onclick="calc('+')" />
<input type="button" value="减" onclick="calc('-')" />
<input type="button" value="乘" onclick="calc('*')" />
<input type="button" value="除" onclick="calc('/')" />
<hr /> 第二个值：
<input type="number" class="clear" id="num2" /><br />
<input type="button" value="1" onclick="click2(1)" />
<input type="button" value="2" onclick="click2(2)" />
<input type="button" value="3" onclick="click2(3)" />
<input type="button" value="4" onclick="click2(4)" />
<input type="button" value="5" onclick="click2(5)" />
<input type="button" value="6" onclick="click2(6)" />
<input type="button" value="7" onclick="click2(7)" />
<input type="button" value="8" onclick="click2(8)" />
<input type="button" value="9" onclick="click2(9)" />
<input type="button" value="0" onclick="click2(0)" />
<input type="button" value="清除" onclick="reset2()" />
<hr />
<input type="button" value="计算" class="result" onclick="result()" />
<input type="text" name="res1" id="res1" value="" />

JavaScript代码如下：

<script type="text/javascript">
    //第一个输入框输入数字
    function click1(num) {
        var num1 = document.querySelector("#num1");
        num1.value += num;
    }
    //第一个输入框输重置
    function reset1() {
        var num1 = document.querySelector("#num1");
        num1.value = "";
    }
    //第三个输入框输入数字
    function click2(num) {
        var num1 = document.querySelector("#num2");
        num1.value += num;
    }
    //第三个输入框重置
    function reset2() {
        var num2 = document.querySelector("#num2");
        num2.value = "";
    }
    //第二个输入框输入运算符
    function calc(s) {
        var num3 = document.querySelector("#num3");
        num3.value = s;
    }
    //第四个输入框输出结果
    function result() {
        var num1 = parseInt(document.querySelector("#num1").value);
        var num2 = parseInt(document.querySelector("#num2").value);
        var s = document.querySelector("#num3").value;
        var res = document.querySelector("#res1");
        switch(s) {
            case '+':
                res.value = num1 + num2;
                break;
            case '-':
                res.value = num1 - num2;
                break;
            case '*':
                res.value = num1 * num2;
                break;
            case '/':
                res.value = num1 / num2;
                break;
            default:
                break;
        }
    }
</script>

效果图如下：

标签： html5 javascript
本文转载自: https://blog.csdn.net/weixin_47261870/article/details/125574009
版权归原作者 头不秃代码不止 所有， 如有侵权，请联系我们删除。
登录后发布评论

“JavaScript实现简单计算器”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

安全运营中心数据模拟神器：soc-faker

idea中maven项目pom文件Could not acquire lock(s)

VSCode中常用的快捷键

git-branch详解

毕设开源 基于深度学习的安检管制物品识别系统

kafka的架构

高级java每日一道面试题-2024年9月08日-前端篇-JS的执行顺序是什么样的?

文章导航