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

JavaScript实现简单计算器

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

  1. <!DOCTYPE html>
    2. 

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

  3. <head>
    4. 

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

  5.     <title>calc</title>
    6. 

  6. </head>
    7. 

  7. <body>
    8. 

  8. <input type="number" name="" id="a_number" value="1">
    9. 

  9. <select name="yunsuanfu" id="yunsuanfu" >
    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="number" name="" id="b_number">
    17. 

  17. 的结果是:
    18. 

  18. <span id="jieguo">【&emsp;】</span>
    19. 

  19. <br>
    20. 

  20. <button id="jisuan" onclick="jisuan()">计算</button>
    21. 

  21. </body>
    22. 

    23. 

  23. <script>
    24. 

    25. 

  25. function jisuan() {
    26. 

    27. 

  27.     var a=  document.getElementById("a_number").value;
    28. 

  28.     var b=  document.getElementById("b_number").value;
    29. 

  29.     var yunsuanfu=  document.getElementById("yunsuanfu").value;
    30. 

  30.     var jieguo ;
    31. 

  31.     a =  parseFloat(a);
    32. 

  32.     b =  parseFloat(b);
    33. 

  33.     if(isNaN(a) || isNaN(b)){
    34. 

  34.         jieguo="请输入数字";
    35. 

  35.     }
    36. 

  36.     if(yunsuanfu===''){
    37. 

  37.         jieguo="还没有选择运算符"
    38. 

  38.     }else if(yunsuanfu==='+'){
    39. 

  39.         jieguo = a+b;
    40. 

  40.     }else if(yunsuanfu==='-'){
    41. 

  41.         jieguo = a-b;
    42. 

  42.     }else if(yunsuanfu==='*'){
    43. 

  43.         jieguo= a*b;
    44. 

  44.     }else{
    45. 

  45.         if(b===0){
    46. 

  46.             jieguo="除数不能为0"
    47. 

  47.         }
    48. 

  48.         jieguo= a/b;
    49. 

  49.     }
    50. 

  50.     document.getElementById("jieguo").innerText='【'+ jieguo +'】';
    51. 

    52. 

  52. }
    53. 

  53. </script>
    54. 

    55. 

  55. </html>
    56. 

    57. 

  57. ![简单计算器](https://img.php.cn/upload/image/416/193/351/1637247706719366.png "简单计算器")
    58.

上一篇： 追格企业官网主题（小程序+PC+H5）助你快速搭建个性化品牌官网

下一篇： OceanBase简介及其与MySQL的比较

推荐阅读