<form>
<input type="text" id="calculator-display">
</form>

接下來，我們需要添加一些元素作為計算器的鍵。為了美觀和易讀性，我們可以使用CSS對這些按鈕進行樣式設置。下面是一個常規(guī)的加減乘除計算器樣式代碼：

<style>
button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 10px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<form>
<input type="text" id="calculator-display">
<button onclick="calculate('+')">+</button>
<button onclick="calculate('-')">-</button>
<button onclick="calculate('*')">*</button>
<button onclick="calculate('/')">/</button>
</form>

最后，我們需要編寫一個JavaScript函數來處理計算器的計算邏輯，并在點擊按鈕時調用該函數。下面是一個簡單的計算函數：

<script>
function calculate(operator) {
var display = document.getElementById("calculator-display");
var result = eval(display.value);
if (result.toString() === "Infinity" || result.toString() === "NaN") {
display.value = "Error";
return;
}
display.value = result;
}
</script>

現在，我們已經成功地創(chuàng)建了一個簡單的計算器界面。你可以根據自己的需求添加更多的按鈕和樣式，以及開發(fā)更復雜的計算邏輯來實現更多的功能。