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

简单计算器

程序员文章站 2022-03-06 13:12:05
...

简单计算器

    

  1. <!DOCTYPE html>
    2. 

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

  3. <head>
    4. 

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

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

  6. </head>
    7. 

  7. <body>
    8. 

  8. <input type="text" name="num1" id="num1" value="">
    9. 

  9. <select name="choice" id="choice">
    10. 

  10.     <option value="+">+</option>
    11. 

  11.     <option value="-">-</option>
    12. 

  12.     <option value="*">*</option>
    13. 

  13.     <option value="/">/</option>
    14. 

  14.     <option value="%">%</option>
    15. 

  15. </select>
    16. 

  16. <input type="text" name="num2" id="num2">
    17. 

  17. <input type="button" id="calc" value="计算">
    18. 

  18. <p id="res"></p>
    19. 

    20. 

  20. <script>
    21. 

  21.     document.getElementById('calc').onclick = function () {
    22. 

  22.         var num1 = document.getElementById('num1').value
    23. 

  23.         var num2 = document.getElementById('num2').value
    24. 

  24.         var choice = document.getElementById('choice').value
    25. 

    26. 

  26.         var res = ''
    27. 

  27.         if (num1 == '' || isNaN(num1 * 1)) res += '第一个输入框必须为数字'
    28. 

  28.         if (num2 == '' || isNaN(num2 * 1)) res += '第二个输入框必须为数字'
    29. 

  29.         if ((choice == '/' || choice == '%') && num2 * 1 == 0) res += '第二个输入框不能为零'
    30. 

    31. 

  31.         num1 = num1 * 1;
    32. 

  32.         num2 = num2 * 1;
    33. 

    34. 

  34.         if (!res) {
    35. 

  35.             switch (choice) {
    36. 

  36.                 case '+':
    37. 

  37.                     res = num1 + num2
    38. 

  38.                     break
    39. 

  39.                 case '-':
    40. 

  40.                     res = num1 - num2
    41. 

  41.                     break
    42. 

  42.                 case '*':
    43. 

  43.                     res = num1 * num2
    44. 

  44.                     break
    45. 

  45.                 case '/':
    46. 

  46.                     res = num1 / num2
    47. 

  47.                     break
    48. 

  48.                 default:
    49. 

  49.                     res = num1 % num2
    50. 

  50.             }
    51. 

  51.         }
    52. 

    53. 

  53.         document.getElementById('res').innerText = res
    54. 

  54.     }
    55. 

  55. </script>
    56. 

  56. </body>
    57. 

  57. </html>
    58.

简单计算器

简单计算器

上一篇： 小鸟云虚拟主机和云服务器和裸金属服务器有何不一样？

下一篇： 古典的服饰怎么画？古典服饰参考画法！

推荐阅读