欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

简单的计算器制作

程序员文章站 2022-03-06 13:14:08
...

简单的计算器制作 ,输入数字验证,暂时只能做到用数据转换,如果输入的是数字后加字母还是无法排除,
如:parseInt(123asd) = 123

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Title</title>
    6. 

  6.     <style>
    7. 

  7.         .div1 {
    8. 

  8.             width: 250px;
    9. 

  9.             height: 400px;
    10. 

  10.             background: #dbdbdb;
    11. 

  11.             border: 1px solid slategray;
    12. 

  12.             box-shadow: 0px 1px 3px 0px;
    13. 

  13.             border-radius: 5px 5px;
    14. 

  14.             margin: 30px 100px;
    15. 

  15.         }
    16. 

  16.         .d2 {
    17. 

  17.             text-align: center;
    18. 

    19. 

  19.         }
    20. 

  20.          .mt-4 {
    21. 

  21.              margin-top: 10px;
    22. 

  22.              padding: 10px;
    23. 

  23.          }
    24. 

  24.     </style>
    25. 

  25. </head>
    26. 

  26. <body>
    27. 

    28. 

    29. 

    30. 

    31. 

  31.     <section class="div1 mt-4">
    32. 

  32.         <div class="d2 mt-4"><span>计算器</span></div>
    33. 

    34. 

  34.         <input type="text" size="2" id="num1">
    35. 

    36. 

  36.         <select name="select" id="select">
    37. 

  37.             <option value="+">+</option>
    38. 

  38.             <option value="-">-</option>
    39. 

  39.             <option value="*">*</option>
    40. 

  40.             <option value="/">/</option>
    41. 

  41.             <option value="%">%</option>
    42. 

  42.         </select>
    43. 

  43.         <input type="text" size="2" id="num2">
    44. 

  44.         <span>=</span>
    45. 

  45.         <span id="res"></span><br>
    46. 

  46.             <br>
    47. 

  47.         &nbsp;&nbsp;    <input type="button" value="计算" id="btn">  &nbsp;&nbsp;<button id="reBtn">重置</button>
    48. 

    49. 

  49.         <br>
    50. 

  50.         <br>
    51. 

  51.         <span id="outNum1"></span>
    52. 

  52.         <br>
    53. 

  53.         <span id="outNum2"></span>
    54. 

  54.     </section>
    55. 

    56. 

    57. 

    58. 

  58. </body>
    59. 

  59. <script>
    60. 

  60.     document.getElementById('btn').onclick=function(){
    61. 

  61.         document.getElementById('outNum1').innerHTML="";
    62. 

  62.         document.getElementById('outNum2').innerHTML="";
    63. 

  63.         document.getElementById('res').innerHTML="";
    64. 

  64.         var num1 = parseInt(document.getElementById('num1').value);
    65. 

  65.         var num2 = parseInt(document.getElementById('num2').value);
    66. 

  66.         var maVa =document.getElementById('select').value;
    67. 

    68. 

    69. 

    70. 

  70.         if (isNaN(num1)) {
    71. 

  71.             document.getElementById('outNum1').innerHTML ='第一个数据非数字,请重新输入!';
    72. 

  72.             return;
    73. 

  73.         }
    74. 

    75. 

  75.         if (isNaN(num2)) {
    76. 

  76.             document.getElementById('outNum2').innerHTML ='第二个数据非数字,请重新输入!';
    77. 

  77.             return;
    78. 

  78.         }
    79. 

  79.         switch (maVa){
    80. 

  80.         case '+':
    81. 

  81.         document.getElementById('res').innerHTML=num1+num2;
    82. 

  82.         break
    83. 

    84. 

  84.         case '-':
    85. 

  85.             document.getElementById('res').innerHTML =num1-num2;
    86. 

  86.             break;
    87. 

  87.         case '*':
    88. 

  88.             document.getElementById('res').innerHTML = num1 * num2;
    89. 

  89.             break
    90. 

  90.         case '/':
    91. 

  91.             if (num2==0){
    92. 

  92.                 document.getElementById('outNum2').innerHTML ='第二个数据不能为0,请重新输入!';
    93. 

  93.                 return;
    94. 

  94.             }
    95. 

  95.             document.getElementById('res').innerHTML = num1 / num2;
    96. 

  96.             break;
    97. 

  97.         case '%':
    98. 

  98.             if (num2==0){
    99. 

  99.                 document.getElementById('outNum2').innerHTML ='第二个数据不能为0,请重新输入!';
    100. 

  100.                 return;
    101. 

  101.             }
    102. 

  102.             document.getElementById('res').innerHTML =num1%num2;
    103. 

  103.             break;
    104. 

  104.         }
    105. 

  105.     };
    106. 

    107. 

  107.     document.getElementById('reBtn').onclick = function (){
    108. 

  108.         document.getElementById('outNum1').innerHTML="";
    109. 

  109.         document.getElementById('outNum2').innerHTML="";
    110. 

  110.         document.getElementById('res').innerHTML="";
    111. 

  111.         document.getElementById('num1').value="";
    112. 

  112.         document.getElementById('num2').value="";
    113. 

  113.     }
    114. 

    115. 

  115. </script>
    116. 

  116. </html>
    117.

上一篇： PHP基金会为什么是个好事 ？

下一篇： “近年来最大计算机漏洞”被中国程序员发现！

推荐阅读