HTML/JS 简单计算器

你的名字 2022-06-06 09:47 226阅读 0赞

<p>简单计算器:</p>  
<table border="1" style="position:center;">  
  <tr>  
    <td>第一个数：</td>  
    <td><input type="text" id="first"/></td>  
  </tr>  
  <tr>  
    <td>第二个数：</td>  
    <td><input type="text" id="twice"/></td>  
  </tr>  
  <tr>  
    <td colspan="2" >  
      &nbsp;  
      <button style="width:inherit" οnclick="add()">+</button>  
      &nbsp;  
      <button style="width:inherit" οnclick="subtract()">-</button>  
      &nbsp;  
      <button style="width:inherit" οnclick="ride()">\*</button>  
      &nbsp;  
      <button style="width:inherit" οnclick="devide()">/</button>  
    </td>  
  </tr>  
  <tr>  
    <td colspan="2" rowspan="2">  
      <p id="result"></p>  
    </td>  
  </tr>

</table>

var result\_1;  
//加法  
function add() \{  
  var a = getFirstNumber();  
  var b = getTwiceNumber();  
  var re =Number( a) +Number( b);  
  sendResult(re);  
\}  
  
  
//减法  
function subtract() \{  
  var a = getFirstNumber();  
  var b = getTwiceNumber();  
  var re = a - b;  
  sendResult(re);  
\}  
  
  
//乘法  
function ride() \{  
  var a = getFirstNumber();  
  var b = getTwiceNumber();  
  var re = a \* b;  
  sendResult(re);  
\}  
  
  
//除法  
function devide() \{  
  var a = getFirstNumber();  
  var b = getTwiceNumber();  
  var re = a / b;  
  sendResult(re);  
\}  
  
  
//给p标签传值  
function sendResult(result\_1) \{  
  var num = document.getElementById("result")  
  num.innerHTML = result\_1;  
\}  
  
  
//获取第一位数字  
function getFirstNumber() \{  
  var firstNumber = document.getElementById("first").value;  
  return firstNumber;  
\}  
  
  
//获取第二位数字  
function getTwiceNumber() \{  
  var twiceNumber = document.getElementById("twice").value;  
  return twiceNumber;  
\}