应用java script制作一个计算器可以对整数小数进行加减乘除

好的，以下是一个简单的实现方式：

HTML代码：

<div class="calculator">
  <input type="text" class="input" readonly>
  <button class="btn" onclick="clearScreen()">C</button>
  <button class="btn" onclick="addChar('/')">÷</button>
  <button class="btn" onclick="addChar('*')">x</button>
  <button class="btn" onclick="addChar('7')">7</button>
  <button class="btn" onclick="addChar('8')">8</button>
  <button class="btn" onclick="addChar('9')">9</button>
  <button class="btn" onclick="addChar('-')">-</button>
  <button class="btn" onclick="addChar('4')">4</button>
  <button class="btn" onclick="addChar('5')">5</button>
  <button class="btn" onclick="addChar('6')">6</button>
  <button class="btn" onclick="addChar('+')">+</button>
  <button class="btn" onclick="addChar('1')">1</button>
  <button class="btn" onclick="addChar('2')">2</button>
  <button class="btn" onclick="addChar('3')">3</button>
  <button class="btn" onclick="calculate()">=</button>
  <button class="btn" onclick="addChar('0')">0</button>
  <button class="btn" onclick="addChar('.')">.</button>
</div>

CSS代码：

.calculator {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1rem;
  width: 300px;
  margin: 0 auto;
  text-align: center;
}

.input {
  grid-column: span 4;
  margin-bottom: 1rem;
  padding: 0.5rem;
  font-size: 2rem;
  text-align: right;
}

.btn {
  grid-column: span 1;
  padding: 0.5rem;
  font-size: 1.5rem;
  border-radius: 5px;
  background-color: #f1f1f1;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

JavaScript代码：

let screen = document.querySelector('.input');
let clearScreen = () => screen.value = '';
let addChar = (char) => screen.value += char;
let calculate = () => {
  try {
    screen.value = eval(screen.value);
  } catch (error) {
    screen.value = 'Error';
  }
};

上述代码通过监听按钮点击事件，实现了对计算器的基本操作，包括清空屏幕、添加字符和计算结果。其中，在计算结果时使用了 JavaScript 的 eval() 函数对表达式进行求值。需要注意的是，eval() 函数具有一定的安全性问题，如果用于处理用户输入的表达式，应该加以限制和验证。