现在我们需要编写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来控制按钮的点击和计算过程。这将是一个很好的练手项目，有助于我们更好地学习这些前端技术的使用。