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

JavaScript简单计算器

程序员文章站 2022-03-03 22:33:19
...
    

  1. <!DOCTYPE html>
    2. 

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

  3. <head>
    4. 

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

  5.     <title>简单计算器</title>
    6. 

  6. </head>
    7. 

  7. <body>
    8. 

  8. <div>
    9. 

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

  10.     <select id="yunsuanfu">
    11. 

  11.         <option value="请选择">请选择</option>
    12. 

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

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

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

  15.         <option value="/">/</option>
    16. 

  16.         <option value="%">%</option>
    17. 

  17.     </select>
    18. 

  18.     <input type="text" id="num2" value="">
    19. 

  19.     <button id="count">
    20. 

  20.         计算
    21. 

  21.     </button>
    22. 

  22.     <p id="jieguo"></p>
    23. 

  23. </div>
    24. 

  24. </body>
    25. 

  25. <script>
    26. 

    27. 

  27.     var count = document.getElementById('count');
    28. 

    29. 

  29.     count.onclick = function(){
    30. 

    31. 

  31.         var num1 =document.getElementById('num1').value;
    32. 

  32.         var num2 =document.getElementById('num2').value;
    33. 

  33.         var yunsuanfu =document.getElementById('yunsuanfu').value
    34. 

  34.         var re = /^[0-9]+.?[0-9]*/;
    35. 

    36. 

  36.         if (num1 =='' || num2 ==''){
    37. 

  37.             document.getElementById('jieguo').innerHTML= '错误：计算不能为空'
    38. 

  38.         }
    39. 

  39.         else if(num2 == 0 && (yunsuanfu =='/' || yunsuanfu == '%')){
    40. 

  40.             document.getElementById('jieguo').innerHTML= '错误：被除数不能为0'
    41. 

  41.         }
    42. 

  42.         else if(!re.test(num1) || !re.test(num2)){
    43. 

  43.             document.getElementById('jieguo').innerHTML= '错误：只能填写数字进行计算'
    44. 

  44.         }
    45. 

  45.         else {
    46. 

  46.             num1 = parseFloat(num1);
    47. 

  47.             num2 = parseFloat(num2);
    48. 

  48.             console.log(num1)
    49. 

  49.             console.log(num2)
    50. 

  50.             if(yunsuanfu == '请选择'){
    51. 

  51.                 document.getElementById('jieguo').innerHTML='请选择运算符';
    52. 

  52.             }
    53. 

  53.             if(yunsuanfu == '+'){
    54. 

  54.                 document.getElementById('jieguo').innerHTML=num1+'+'+num2+'='+(num1+num2);
    55. 

  55.             }
    56. 

  56.             if(yunsuanfu == '-'){
    57. 

  57.                 document.getElementById('jieguo').innerHTML=num1+'-'+num2+'='+(num1-num2);
    58. 

  58.             }
    59. 

  59.             if(yunsuanfu == '*'){
    60. 

  60.                 document.getElementById('jieguo').innerHTML=num1+'*'+num2+'='+(num1*num2);
    61. 

  61.             }
    62. 

  62.             if(yunsuanfu == '/'){
    63. 

  63.                 document.getElementById('jieguo').innerHTML=num1+'除'+num2+'='+(num1/num2);
    64. 

  64.             }
    65. 

  65.             if(yunsuanfu == '%'){
    66. 

  66.                 document.getElementById('jieguo').innerHTML=num1+'取余'+num2+'='+(num1%num2);
    67. 

  67.             }
    68. 

    69. 

  69.         }
    70. 

    71. 

  71.     }
    72. 

    73. 

  73. </script>
    74. 

  74. </html>
    75.

上一篇： echarts移动端的适配思路

下一篇： js学习-实现简单计算器

推荐阅读