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

简单计算器

程序员文章站 2022-03-13 13:54:58
...

计算器

图片展示

简单计算器

代码如下

    

  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.

上一篇： 用cookie实现简单的用户自定义页面样式

下一篇： 一个可编辑的表格 双击进行编辑,回车确认编辑内容,如果不回车确认.那么恢复原来的值

推荐阅读