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

js学习-实现简单计算器

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

script的简单运用，实现简单计算器

    

  1. html
    2. 

  2. <!DOCTYPE html>
    3. 

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

  4. <head>
    5. 

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

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

  7. <style type="text/css">
    8. 

  8.     input{
    9. 

  9.         width: 100px;
    10. 

  10.         font-size: 20px;
    11. 

  11.     }
    12. 

  12.     select,span{
    13. 

  13.         font-size: 20px;
    14. 

  14.     }
    15. 

  15. </style>
    16. 

  16. </head>
    17. 

  17. <body>
    18. 

  18.     <div>
    19. 

  19.     <input type="text" name="" id="num1" value="" />
    20. 

  20.     <select name="运算符号" id="yunsuanf">
    21. 

  21.         <option value="+">+</option>
    22. 

  22.         <option value="-">-</option>
    23. 

  23.         <option value="*">*</option>
    24. 

  24.         <option value="÷">/</option>
    25. 

  25.     </select>
    26. 

  26.     <input type="number"   id="num2" value=""/>
    27. 

  27.     <span>=</span>
    28. 

  28.     <input type="number"   id="dd3" value=""  placeholder="显示结果"  disabled="disabled" />
    29. 

  29.     <button type="button" onclick="jisuan()">点击计算</button>
    30. 

    31. 

  31.     <br><br>
    32. 

  32.     <!-- <div id="dd3">
    33. 

  33.          计算的结果是:
    34. 

  34.      </div> -->
    35. 

  35. </div>
    36. 

  36. <script >
    37. 

  37.     function jisuan() {
    38. 

    39. 

  39.         var dd1=document.getElementById('num1').value
    40. 

  40.         ddd1=parseFloat(dd1)
    41. 

    42. 

  42.         // parseFloat 是解析字符串并返回浮点数。指定字符串中的第一个字符是否为数字。如果是，它会解析字符串直到到达数字的末尾，并将数字作为数字而不是字符串返回。只返回字符串中的第一个数字！如果第一个字符不能转换为数字，parseFloat() 返回 NaN。使用isNaN(numValue)判断，如果值是 NaN， 那么 isNaN 函数返回 true ，否则返回 false
    43. 

  43.         var dd2=document.getElementById('num2').value
    44. 

  44.         ddd2=parseFloat(dd2)
    45. 

  45.         var jieguo=document.getElementById('dd3')
    46. 

  46.         var ysf= document.getElementById('yunsuanf').value
    47. 

  47.         if (isNaN(ddd1)){
    48. 

  48.             alert('请输入纯数字')
    49. 

  49.         } else
    50. 

    51. 

  51.         if(ysf=='+'){
    52. 

  52.            jieguo.value=ddd1+ddd2
    53. 

  53.         }else if(ysf=='-'){
    54. 

  54.             jieguo.value=ddd1-ddd2
    55. 

  55.         }else if(ysf=='*'){
    56. 

  56.             jieguo.value=ddd1*ddd2
    57. 

  57.         }else {
    58. 

  58.             jieguo.value=ddd1/ddd2
    59. 

  59.         }
    60. 

    61. 

  61.     }
    62. 

    63. 

  63. </script>
    64. 

  64. </body>
    65. 

  65. </html>
    66.

上一篇： JavaScript简单计算器

下一篇： js 实现数组排序 获取最大值，最小值，翻转

推荐阅读