用js实现简单计算器

最新推荐文章于 2025-06-17 12:24:11 发布

da_feng_

最新推荐文章于 2025-06-17 12:24:11 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.csdn.net/da_feng_/article/details/116170272

本文介绍如何利用JavaScript实现一个简单计算器，涵盖获取元素、获取表单值及绑定点击事件的方法，并提供了部分计算器代码。

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

用js实现简单计算器

一、所用方法

1、如何获取元素

 var input1 = document.getElementById('one');

2、如何获取表单元素的值

   sum = Number(input1.value) + Number(input2.value);

3.如何绑定点击事件

input4.onclick = function(){
}

二、计算器代码

下面展示一些 内联代码片。

<!DOCTYPE html>
<html>
<head>
 <title>计算器</title>
 <meta charset="utf-8">
</head>
<body>
 <input type="text" id="one" name="">
 <select id="three">
  <option>+</option>
  <option>-</option>
  <option>*</option>
  <option>/</option>
 </select>
 <input type="text" id="two" name="">
 <button id="four">提交</button>
 <input type="text" id="result" name="">
</body>

</html>

<script type="text/javascript">
 var input1 = document.getElementById('one');
 var input2 = document.getElementById('two');
 var input3 = document.getElementById('three');
 var input4 = document.getElementById('four');
 
 input4.onclick = function(){
  if(input3.value === '+'){

   sum = Number(input1.value) + Number(input2.value);
   document.getElementById("result").value = sum;
  }else if(input3.value === '-'){
   jian = Number(input1.value) - Number(input2.value);
   document.getElementById("result").value = jian;
  }else if(input3.value === '*'){
   cheng = Number(input1.value) * Number(input2.value);
   document.getElementById("result").value = cheng;
  }else if(input3.value === '/'){
   cheng = Number(input1.value) / Number(input2.value);
   document.getElementById("result").value = cheng;
   
  }
 }
 



</script>