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

简单计算器

程序员文章站 2022-03-01 20:41:39
...
    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

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

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

    7. 

    8. 

    9. 

  9. </head>
    10. 

  10. <body>
    11. 

  11. <script>
    12. 

  12.     function fn(){
    13. 

  13.         var od1= document.getElementById('d1').value
    14. 

  14.           od1=parseFloat(od1)
    15. 

  15.         var od2= document.getElementById('d2').value
    16. 

  16.           od2=parseFloat(od2)
    17. 

  17.         var od3=document.getElementById('d3')
    18. 

  18.         var oysf=document.getElementById('ysf').value
    19. 

  19.          if(oysf=='+'){
    20. 

  20.             od3.value=od1+od2
    21. 

  21.          }else if(oysf=='-'){
    22. 

  22.              od3.value=od1-od2
    23. 

  23.          }else if(oysf=='*'){
    24. 

  24.              od3.value=od1*od2
    25. 

  25.          }else {
    26. 

  26.              od3.value=od1/od2
    27. 

  27.          }
    28. 

  28.     }
    29. 

  29. </script>
    30. 

    31. 

  31. <input id="d1" type="text" value="">
    32. 

  32. <select id="ysf">
    33. 

  33.     <option value="+">+</option>
    34. 

  34.     <option value="-">-</option>
    35. 

  35.     <option value="*">*</option>
    36. 

  36.     <option value="÷">/</option>
    37. 

  37. </select>
    38. 

  38. <input id="d2" type="text" value=""><span>=</span>
    39. 

  39. <input type="text" id="d3" value="">
    40. 

  40. <button onclick="fn()">点击计算</button>
    41. 

  41. </body>
    42. 

  42. </html>
    43.

上一篇： 必须get的几大php缓存技术

下一篇： js实现极为简单的计算器

推荐阅读