用js实现简单计算器

2022-08-15 09:48:56

用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;}elseif(input3.value==='-'){
   jian=Number(input1.value)-Number(input2.value);
   document.getElementById("result").value= jian;}elseif(input3.value==='*'){
   cheng=Number(input1.value)*Number(input2.value);
   document.getElementById("result").value= cheng;}elseif(input3.value==='/'){
   cheng=Number(input1.value)/Number(input2.value);
   document.getElementById("result").value= cheng;}}</script>
  • 作者:da_feng_
  • 原文链接:https://blog.csdn.net/da_feng_/article/details/116170272
    更新时间:2022-08-15 09:48:56