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

简单计算器

程序员文章站 2022-03-03 22:37:44
...

计算器

图片展示

简单计算器

代码如下

    

  1. <!DOCTYPE html>
    2. 

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

  3. <head>
    4. 

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

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 

  7.     <title>计算器</title>
    8. 

  8. </head>
    9. 

  9. <body>
    10. 

  10.     <input type="text" id="x" value="">
    11. 

  11.     <select name="" id="cs">
    12. 

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

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

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

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

  16.     </select>
    17. 

  17.     <input type="text" id="y" value="">
    18. 

  18.     <input type="button" value="=" id="btn">
    19. 

  19.     <p  id="he">
    20. 

  20.     <script>
    21. 

  21.         // 获取按钮注册事件
    22. 

  22.         document.getElementById('btn').onclick=function(){
    23. 

  23.             var x=parseInt(document.getElementById('x').value);
    24. 

  24.             var y=parseInt(document.getElementById('y').value);
    25. 

  25.             var cs=document.getElementById('cs').value;
    26. 

  26.             // var cs=document.getElementById('cs').innerText;
    27. 

  27.             // document.getElementById('he').innerText=x+"---"+cs+"---"+y;
    28. 

  28.             var he=parseInt(document.getElementById('he').value);
    29. 

  29.             switch(cs){
    30. 

  30.                 case '+':
    31. 

  31.                     he = x + y;
    32. 

  32.                     break;
    33. 

  33.                 case '-':
    34. 

  34.                     he = x - y;
    35. 

  35.                     break;
    36. 

  36.                 case '*':
    37. 

  37.                     he = x * y;
    38. 

  38.                     break;
    39. 

  39.                 case '/':
    40. 

  40.                     he = x / y;
    41. 

  41.                     break;
    42. 

  42.                 default:
    43. 

  43.                 '';
    44. 

  44.             }
    45. 

  45.             return document.getElementById('he').innerText=he;
    46. 

  46.         }
    47. 

  47.     </script>
    48. 

  48. </body>
    49. 

  49. </html>
    50.

上一篇： 追格WordPress企业官网主题模板（带企业官网小程序）正式发布

下一篇： 追格小程序带你0基础做一款机械工业企业官网小程序

推荐阅读