JavaScript实现简易计算器

阳光穿透心脏的1/2处 2022-05-21 02:56 341阅读 0赞

70

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>IFE ECMAScript</title>
  7. </head>
  9. <body>
  10.     <input id="first-number" type="number" value="0" placeholder="第一个数字">
  11.     <input id="second-number" type="number" value="0" placeholder="第二个数字">
  12.     <button id="add-btn" οnclick="add()">加</button>
  13.     <button id="minus-btn" οnclick="minus()">减</button>
  14.     <button id="times-btn" οnclick="multiply()">乘</button>
  15.     <button id="divide-btn" οnclick="divide()">除</button>
  16.     <p id="result">运算结果</p>
  17.     <script>
  18.         function add() {
  19.             document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) + parseInt(document.getElementById("second-number").value)); 
  20.         }
  21.         function minus() {
  22.             document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) - parseInt(document.getElementById("second-number").value)); 
  23.         }
  24.         function multiply() {
  25.             document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) * parseInt(document.getElementById("second-number").value)); 
  26.         }
  27.         function divide() {
  28.             document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) / parseInt(document.getElementById("second-number").value)); 
  29.         }
  30.     </script>
  31. </body>
  33. </html>
  35. <!DOCTYPE html>
  36. <html>
  38. <head>
  39.     <meta charset="UTF-8">
  40.     <title>IFE ECMAScript</title>
  41. </head>
  43. <body>
  44.     <input id="first-number" type="number" value="0" placeholder="第一个数字">
  45.     <input id="second-number" type="number" value="0" placeholder="第二个数字">
  46.     <button id="add-btn">加</button>
  47.     <button id="minus-btn">减</button>
  48.     <button id="times-btn">乘</button>
  49.     <button id="divide-btn">除</button>
  50.     <p id="result">运算结果</p>
  51.     <script>
  52.         var btn1 = document.querySelector("#add-btn");
  53.         var btn2 = document.querySelector("#minus-btn");
  54.         var btn3 = document.querySelector("#times-btn");
  55.         var btn4 = document.querySelector("#divide-btn");
  56.         function add() {
  57.             document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) + parseInt(document.getElementById("second-number").value)); 
  58.         }
  59.         function minus() {
  60.             document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) - parseInt(document.getElementById("second-number").value)); 
  61.         }
  62.         function times() {
  63.             document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) * parseInt(document.getElementById("second-number").value)); 
  64.         }
  65.         function divide() {
  66.             document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) / parseInt(document.getElementById("second-number").value)); 
  67.         }
  68.         btn1.addEventListener("click", add);
  69.         btn2.addEventListener("click", minus);
  70.         btn3.addEventListener("click", times);
  71.         btn4.addEventListener("click", divide);
  72.     </script>
  73. </body>
  75. </html>
  80. <!DOCTYPE html>
  81. <html>
  83. <head>
  84.     <meta charset="UTF-8">
  85.     <title>IFE ECMAScript</title>
  86. </head>
  88. <body>
  89.     <input id="first-number" type="number" value="0" placeholder="第一个数字">
  90.     <input id="second-number" type="number" value="0" placeholder="第二个数字">
  91.     <button id="add-btn">加</button>
  92.     <button id="minus-btn">减</button>
  93.     <button id="times-btn">乘</button>
  94.     <button id="divide-btn">除</button>
  95.     <p id="result">运算结果</p>
  96.     <script>
  97.         var btn1 = document.querySelector("#add-btn");
  98.         var btn2 = document.querySelector("#minus-btn");
  99.         var btn3 = document.querySelector("#times-btn");
  100.         var btn4 = document.querySelector("#divide-btn");
  101.         function add() {
  102.             document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) + parseInt(document.getElementById("second-number").value)); 
  103.         }
  104.         function minus() {
  105.             document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) - parseInt(document.getElementById("second-number").value)); 
  106.         }
  107.         function times() {
  108.             document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) * parseInt(document.getElementById("second-number").value)); 
  109.         }
  110.         function divide() {
  111.             var divisor = parseInt(document.getElementById("second-number").value);
  112.             try {
  113.                 if (divisor == 0) {
  114.                     throw "除数不能为零！";
  115.                 }
  116.             } catch (error) {
  117.                 console.log(error);
  118.             }
  119.             document.getElementById("result").innerHTML = (parseInt(document.getElementById("first-number").value) / divisor); 
  120.         }
  121.         btn1.addEventListener("click", add);
  122.         btn2.addEventListener("click", minus);
  123.         btn3.addEventListener("click", times);
  124.         btn4.addEventListener("click", divide);
  125.     </script>
  126. </body>
  128. </html>
  133. <!DOCTYPE html>
  134. <html>
  136. <head>
  137.     <meta charset="UTF-8">
  138.     <title>IFE ECMAScript</title>
  139. </head>
  141. <body>
  142.     <input id="first-number" type="number" value="0" placeholder="第一个数字">
  143.     <input id="second-number" type="number" value="0" placeholder="第二个数字">
  144.     <button id="add-btn">加</button>
  145.     <button id="minus-btn">减</button>
  146.     <button id="times-btn">乘</button>
  147.     <button id="divide-btn">除</button>
  148.     <p id="result">运算结果</p>
  149.     <script>
  150.         var btn1 = document.querySelector("#add-btn");
  151.         var btn2 = document.querySelector("#minus-btn");
  152.         var btn3 = document.querySelector("#times-btn");
  153.         var btn4 = document.querySelector("#divide-btn");
  154.         function add() {
  155.             return (parseInt(document.getElementById("first-number").value) + parseInt(document.getElementById("second-number").value)); 
  156.         }
  157.         function minus() {
  158.             return (parseInt(document.getElementById("first-number").value) - parseInt(document.getElementById("second-number").value)); 
  159.         }
  160.         function times() {
  161.             return (parseInt(document.getElementById("first-number").value) * parseInt(document.getElementById("second-number").value)); 
  162.         }
  163.         function divide() {
  164.             var divisor = parseInt(document.getElementById("second-number").value);
  165.             try {
  166.                 if (divisor == 0) {
  167.                     throw "除数不能为零！";
  168.                 }
  169.             } catch (error) {
  170.                 console.log(error);
  171.             }
  172.             return (parseInt(document.getElementById("first-number").value) / divisor); 
  173.         }
  174.         btn1.addEventListener("click", add);
  175.         btn2.addEventListener("click", minus);
  176.         btn3.addEventListener("click", times);
  177.         btn4.addEventListener("click", divide);
  178.         btn1.addEventListener("click", function() {
  179.             document.getElementById("result").innerHTML = add();
  180.         });
  181.         btn2.addEventListener("click", function() {
  182.             document.getElementById("result").innerHTML = minus();
  183.         });
  184.         btn3.addEventListener("click", function() {
  185.             document.getElementById("result").innerHTML = times();
  186.         });
  187.         btn4.addEventListener("click", function() {
  188.             document.getElementById("result").innerHTML = divide();
  189.         });
  190.     </script>
  191. </body>
  193. </html>

发表评论

表情：
评论列表 （有 0 条评论，341人围观）

还没有评论，来说两句吧...

相关阅读