现在我们需要编写JavaScript代码来控制计算器的行为。以下是代码：

script
  
var calculator = document.getElementById("calculator"); // 获取计算器元素
  
var buttons = calculator.getElementsByClassName("button"); // 获取按钮元素
  
var display = document.getElementById("display"); // 获取用来显示结果的元素
  
var currentNumber = ""; // 初始化当前计算器屏幕上的数字
  
var operation = ""; // 初始化操作符
  
// 为按钮添加点击事件
  
for (var i = 0; i < buttons.length; i++) {
  
buttons[i].addEventListener("click", function() {
  
// 如果按下的是数字,就添加到当前数字末尾,并在计算器屏幕上显示,否则执行运算
  
if (!isNaN(this.innerHTML) || this.innerHTML === ".") {
  
currentNumber += this.innerHTML;
  
display.innerHTML = currentNumber;
  
} else {
  
executeOperation(this.innerHTML);
  
}
  
});
  
}
  
// 执行运算
  
function executeOperation(symbol) {
  
if (symbol === "C")
  
// 清空屏幕和当前数字
  
display.innerHTML = "0";
  
currentNumber = "";
  
operation = "";
  
else if (symbol === "=") {
  
// 执行计算
  
switch (operation) {
  
case "+":
  
display.innerHTML = parseFloat(currentNumber) + parseFloat(display.innerHTML);
  
break;
  
case "-":
  
display.innerHTML = parseFloat(display.innerHTML) - parseFloat(currentNumber);
  
break;
  
case "*":
  
display.innerHTML = parseFloat(currentNumber) * parseFloat(display.innerHTML);
  
break;
  
case "/":
  
display.innerHTML = parseFloat(display.innerHTML) / parseFloat(currentNumber);
  
break;
  
}
  
// 重置当前数字和操作符
  
currentNumber = "";
  
operation = "";
  
} else {
  
// 保存操作符并显示目前已经计算的结果
  
operation = symbol;
  
display.innerHTML = parseFloat(currentNumber);
  
currentNumber = "";
  
}
  
}
  

首先我们用`document.getElementById("calculator")`和`calculator.getElementsByClassName("button")`分别获取计算器和所有按钮元素。接着定义一个变量`currentNumber`来保存当前在计算器屏幕上的数字，以及一个变量`operation`来保存当前的操作符。之后我们遍历所有的按钮元素，给每一个按钮添加一个点击事件。

在这个点击事件中，如果被点击的按钮是数字或者小数点，则我们把这个数字或小数点添加到当前数字的末尾并展示在屏幕上。否则如果被点击的按钮是“C”(清空)或“=”(计算)，则分别执行清空屏幕和当前数字或者执行计算操作。计算部分我们使用JavaScript的`switch`语句来找到合适的操作符，然后完成相应的运算，最后重新设置当前数字和操作符。如果被点击的按钮是其他的符号，则表示需要切换运算符操作。

最后一步，我们还需要添加一些CSS来美化这个计算器，以下是CSS代码：

ss
  
#calculator
  
  width: 250px;
  
  margin: 0 auto;
  
  padding: 20px;
  
  border: 1px solid #ddd;
  
  font-size: 20px;
  
  text-align: center;
  
#display
  
  height: 50px;
  
  margin-bottom: 20px;
  
  padding: 10px;
  
  background-color: #eee;
  
  font-size: 30px;
  
  text-align: right;
  
  border: 1px solid #ddd;
  
.button
  
  width: 50px;
  
  height: 50px;
  
  margin: 5px;
  
  padding: 0;
  
  font-size: 24px;
  
  background-color: #f0f0f0;
  
  color: #444;
  
  border: 1px solid #ccc;
  
  border-radius: 5px;
  
  cursor: pointer;
  
  display: inline-block;
  

这个CSS样式设置中，我们设置计算器的宽度为250像素，内部元素有一定的间隙和边框。屏幕上显示的数字使用了较大的字体大小和右对齐布局，以方便用户进行观察。按钮的样式设置了相应的宽度、高度、内边距、边框、背景和光标样式等等。

到这里，我们已经完成了一个JavaScript制作的简易计算器，可以在网页上运行。在这个过程中，我们学习了如何使用HTML来创建基本框架，并使用CSS来美化，最后使用JavaScript来控制按钮的点击和计算过程。这将是一个很好的练手项目，有助于我们更好地学习这些前端技术的使用。