实现一个简易计算器

Radish_05

于 2020-10-04 11:59:19 发布

阅读量282

点赞数

分类专栏：小东西文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Radish_05/article/details/108917780

版权

小东西专栏收录该内容

1 篇文章

订阅专栏

该博客展示了如何使用HTML创建用户界面，结合JavaScript实现一个基本的四则运算计算器。用户可以输入两个数值，选择运算符，点击计算按钮，程序会根据选择的运算符进行相应的加减乘除运算，并在结果显示框中展示计算结果。JavaScript代码中包含了正则表达式验证输入，确保数值的合法性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、html部分

 <input type="text" id="txt1">
    <select id="symbol">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" id="txt2">
    <input type="text" id="txt3">
    <input type="button" value="计算" id="btn">

2、js部分

var oTxt1 = document.querySelector('#txt1');
var oTxt2 = document.querySelector('#txt2');
var oTxt3 = document.querySelector('#txt3');
var oSymbol = document.querySelector('#symbol');
var oBtn = document.querySelector('#btn');

oBtn.onclick = function () {
    var reg = /^[0-9]+\.?/;
    if (reg.test(oTxt1.value) && reg.test(oTxt2.value)) {
       //console.log('true');
        switch (oSymbol.value) {
           case '+':
               return oTxt3.value = parseFloat(oTxt1.value) + parseFloat(oTxt2.value);
               break;
           case '-':
               return oTxt3.value = parseFloat(oTxt1.value) - parseFloat(oTxt2.value);
               break;
           case '*':
               return oTxt3.value = parseFloat(oTxt1.value) * parseFloat(oTxt2.value);
                break;
           case '/':
                return oTxt3.value = parseFloat(oTxt1.value) / parseFloat(oTxt2.value);
                break;
                }
            }else{
                return false;
            }         
        }