JavaScript之简易计算器“+”“-”“x”“/”（实现代码及原理）

最新推荐文章于 2023-03-23 17:46:23 发布

旭霖

最新推荐文章于 2023-03-23 17:46:23 发布

阅读量624

点赞数 1

分类专栏： JavaScript 文章标签： javascript html5

本文链接：https://blog.csdn.net/xhd11257339/article/details/117854481

版权

JavaScript 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

以上是实现效果，你看是你需要的啵~

下面是body中的代码

<body>
  <!-- id选择器具有唯一性，也可以用类选择器或者别的选择器，记得给按钮增加单击事件哦！ -->
    <input type="text" id="num1" value="" placeholder="第一个数"><br>;
    <input type="text" id="num2" value="" placeholder="第二个数"><br>;
   <button onclick="add1()" >+</button>; <!-- 调用函数 -->
    <button onclick="add2()" >-</button>; <!-- 调用函数 -->
    <button onclick="add3()" >x</button>; <!-- 调用函数 -->
    <button onclick="add4()" >/</button><br>; <!-- 调用函数 -->
    <input type="text" id="res" placeholder="计算结果">;
</body>

下方是JavaScript中的函数代码：

<script>
  var _input1 = document.getElementById("num1");//调取第一个输入框的默认值
  var _input2 = document.getElementById("num2");//调取第二个输入框的默认值
  var _input3 = document.getElementById("res");//调取结果框的数值
  //定义函数分别给“+”“-”“x”“/”按钮赋予其对应的功能
  function add1(){
       var _val1 = Number(_input1.value);//调用第一个输入框里的数值，并且声明变量，简单方便，切记不可在函数外声明，因为没有卵用！
       var _val2 = Number(_input2.value);
       _input3.value = _val1 + _val2;//进行加法运算，并且赋值给结果文本框默认值.value，减乘除的函数基本一样，改个符号和函数名即可(想了解的更深，可以在下方评论关注！)
  }
  function add2(){
       var _val1 = Number(_input1.value);
       var _val2 = Number(_input2.value);
       _input3.value = _val1 - _val2;
  }
  function add3(){
       var _val1 = Number(_input1.value);
       var _val2 = Number(_input2.value);
       _input3.value = _val1 * _val2;
  }
  function add4(){
       var _val1 = Number(_input1.value);
       var _val2 = Number(_input2.value);
       _input3.value = _val1 / _val2;
  }
</script>

js的实现原理比较简单，先获取body的对象值，获取到值后进行函数运算，完事了给按钮调用对应的函数即可！

有什么不明白的可以添加QQ：11257339 大家共同探讨！