JS做计算器-优快云博客

本文介绍了一个使用HTML、CSS和JavaScript创建的简易网页计算器。该计算器能够进行基本的数学运算，如加、减、乘、除等，并具备清空功能。通过按钮点击事件触发相应的操作，实现了数字输入和运算符号的选择。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
  .p{width:30;height:30;}
  </style>
  <script type="text/javascript"language="javascript">
  var number1='';
  var number2='';
  var sign=0;
  var result=0.0;
  var number3=0;
  var ls=false;
  function getN(number){
  if(sign==0){
  number1+=number;
  document.getElementById("result").value=number1;
  }
  else{
  number2+=number;
  document.getElementById("result").value=number2;
  }
  }


  function dot1(){
  if(sign==0){
  number1+='.';
  document.getElementById("result").value=number1;
  }
  else{
  number2+='.';
  document.getElementById("result").value=number2;
  }
  }
  function operate(symbol){
  sign=symbol;
  }


  function calculate(){
  number3=parseFloat(number2);
  if(sign==1){
  if(ls==false){
  result=parseFloat(number1)+parseFloat(number2);
  ls=true;
  }
  else{
  result+=number3;
  }
  };
  if(sign==2){
  if(ls==false){
  result=parseFloat(number1)-parseFloat(number2);
  ls=true;
  }
  else{
  result-=number3;
  }
  };
  if(sign==3){
  if(ls==false){
  result=parseFloat(number1)*parseFloat(number2);
  ls=true;
  }
  else{
  result*=number3;
  }
  };
  if(sign==4){
  if(ls==false){
  result=parseFloat(number1)/parseFloat(number2);
  ls=true;
  }
  else{
  result/=number3;
  }
  };
  document.getElementById("result").value=result;
  
  }


  function clear1(){
  number1='';
  number2='';
  sign=0;
  number3=0;
  result=0;
  ls=false;
  document.getElementById("result").value=0;
  }
  
  </script>
 </head>


 <body>
<div><input type="text"id="result"></div><br>
  <div>
  <input type="button"value="1"class="p"onclick="getN(1);">
  <input type="button"value="2"class="p"onclick="getN(2);">
  <input type="button"value="3"class="p"onclick="getN(3);">
  <input type="button"value="+"class="p"onclick="operate(1);">
  </div><br>
  <div>
  <input type="button"value="4"class="p"onclick="getN(4);">
  <input type="button"value="5"class="p"onclick="getN(5);">
  <input type="button"value="6"class="p"onclick="getN(6);">
  <input type="button"value="-"class="p"onclick="operate(2);">
  </div><br>
  <div>
  <input type="button"value="7"class="p"onclick="getN(7);">
  <input type="button"value="8"class="p"onclick="getN(8);">
  <input type="button"value="9"class="p"onclick="getN(9);">
  <input type="button"value="*"class="p"onclick="operate(3);">
  </div><br>
  <div>
  <input type="button"value="0"class="p"onclick="getN(0);">
  <input type="button"value="/"class="p"onclick="operate(4);">
  <input type="button"value="."class="p"onclick="dot1();">
  <input type="button"value="="class="p"onclick="calculate();">
  </div><br>
  <div>
   <input type="button"value="清除"style="width:140px"onclick="clear1();">
  </div>
 </body>

</html>