JavaScript和HTML实现的简单计算机

最新推荐文章于 2024-07-31 16:33:32 发布

weixin_34068198

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量192

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Alan0218/articles/8469056.html

版权

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
     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;
     }
</script>
</head>
<body>
     <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>

</body>
</html>

转载于:https://www.cnblogs.com/Alan0218/articles/8469056.html

weixin_34068198

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript和HTML实现的简单计算机

代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript"> var result_1; //加...
复制链接

扫一扫