JS简易计算器

最新推荐文章于 2024-07-30 21:08:25 发布

happiness_0

最新推荐文章于 2024-07-30 21:08:25 发布

阅读量371

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/happiness_0/article/details/114073741

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Js简易计算器主要是通过获取Dom节点，对其进行操作。
主要功能：加减乘除运算，然后可以清零
具体代码如下：

Calculator.html

<body>
    <div id="box">
        <div class="title">Calculator</div>
        <input type="text" id="num1" placeholder="请输入第一个数字"/>
        <p><select id="operator">
            <!-- 默认为'+'' -->
                <option checked="checked">+</option>
                <option>-</option>
                <option>*</option>
                <option>/</option>
            </select></p>
        <p>
            <!-- placeholder用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。 
            该提示会在用户输入值之前显示在输入字段中
            适用于以下输入类型：text、search、url、tel、email 以及 password。-->
            <input type="text" id="num2" placeholder="请输入第二个数字"/>
        </p>
        <p>
            <input type="button" value="=" onclick="calculate();" />
        </p>
        <input type="text" id="result" placeholder="结果" />
        <input type="button" value="C" onclick="boxReset();" />
    </div>
</body>

Calculator.js

//主要实现获取两个数字和运算符，然后进行相应的计算
function calculate(){
    var num1 = Number(document.getElementById('num1').value);
    var operator =document.getElementById('operator').value;
    var num2 =  Number(document.getElementById('num2').value);
    var result = document.getElementById('result');
         switch(operator){
             case '+' : result.value =  num1 + num2;break;
             case '-' : result.value = num1 - num2;break;
             case '*' : result.value = num1 * num2;break;
             case '/' : result.value = num1 / num2;break;
         }
    // value和innerText都可以使用
}

//将所有数值清零
function boxReset(){
    document.getElementById('num1').value = '';
    document.getElementById('operator').value = '+';
    document.getElementById('num2').value = '';
    document.getElementById('result').value = '';
}

最终结果如图：
下拉框可以选择运算符，按钮C进行清零

happiness_0

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
JS简易计算器

Js简易计算器主要是通过获取Dom节点，对其进行操作。主要功能：加减乘除运算，然后可以清零具体代码如下：Calculator.html<body> <div id="box"> <div class="title">Calculator</div> <input type="text" id="num1" placeholder="请输入第一个数字"/> <p><se
复制链接

扫一扫

专栏目录