JS-task-computer.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .calculator {
  6. max-width: 300px;
  7. margin: 0 auto;
  8. border: 1px solid #ccc;
  9. padding: 10px;
  10. }
  11. .output {
  12. background-color: #f1f1f1;
  13. text-align: right;
  14. padding: 10px;
  15. margin-bottom: 10px;
  16. }
  17. .buttons {
  18. display: grid;
  19. grid-template-columns: repeat(4, 1fr);
  20. gap: 10px;
  21. }
  22. button {
  23. padding: 10px;
  24. font-size: 16px;
  25. background-color: #3498db;
  26. color: #fff;
  27. border: none;
  28. cursor: pointer;
  29. transition: background-color 0.3s ease;
  30. }
  31. button:hover {
  32. background-color: #2980b9;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <div class="calculator">
  38. <div class="output" id="output">0</div>
  39. <div class="buttons">
  40. <button onclick="appendNumber('7')">7</button>
  41. <button onclick="appendNumber('8')">8</button>
  42. <button onclick="appendNumber('9')">9</button>
  43. <button onclick="appendOperator('+')">+</button>
  44. <button onclick="appendNumber('4')">4</button>
  45. <button onclick="appendNumber('5')">5</button>
  46. <button onclick="appendNumber('6')">6</button>
  47. <button onclick="appendOperator('-')">-</button>
  48. <button onclick="appendNumber('1')">1</button>
  49. <button onclick="appendNumber('2')">2</button>
  50. <button onclick="appendNumber('3')">3</button>
  51. <button onclick="appendOperator('*')">*</button>
  52. <button onclick="appendNumber('0')">0</button>
  53. <button onclick="appendNumber('.')">.</button>
  54. <button onclick="calculate()">=</button>
  55. <button onclick="appendOperator('/')">/</button>
  56. <button onclick="clearExpression()">C</button>
  57. <button onclick="backspace()">&#9003;</button>
  58. </div>
  59. </div>
  60. <script>
  61. let outputDiv = document.getElementById('output');
  62. let expression = '';
  63. function appendNumber(number) {
  64. expression += number;
  65. outputDiv.innerText = expression;
  66. }
  67. function appendOperator(operator) {
  68. if (expression.slice(-1) === '+' || expression.slice(-1) === '-' || expression.slice(-1) === '*' || expression.slice(-1) === '/') {
  69. expression = expression.slice(0, -1);
  70. }
  71. expression += operator;
  72. outputDiv.innerText = expression;
  73. }
  74. function calculate() {
  75. try {
  76. const result = eval(expression);
  77. expression = result.toString();
  78. outputDiv.innerText = expression;
  79. } catch (error) {
  80. // 处理错误
  81. expression = '';
  82. outputDiv.innerText = 'Error';
  83. }
  84. }
  85. function clearExpression() {
  86. expression = '';
  87. outputDiv.innerText = '0';
  88. }
  89. function backspace() {
  90. if (expression === '' || expression === '0') {
  91. return;
  92. }
  93. if (expression.length === 1) {
  94. expression = '0';
  95. } else {
  96. expression = expression.slice(0, -1);
  97. }
  98. outputDiv.innerText = expression;
  99. }
  100. </script>
  101. </body>
  102. </html>