HTML代碼，主要創建了幾個按鈕。
<div class="container"><div class="output" id="output">0</div><button class="button" onclick="clearOutput()" id="clear">C</button><button class="button" onclick="appendToOutput('%')">%</button><button class="button" onclick="appendToOutput('/')">/</button><button class="button" onclick="appendToOutput('*')">*</button><button class="button" onclick="appendToOutput('7')">7</button><button class="button" onclick="appendToOutput('8')">8</button><button class="button" onclick="appendToOutput('9')">9</button><button class="button" onclick="appendToOutput('-')">-</button><button class="button" onclick="appendToOutput('4')">4</button><button class="button" onclick="appendToOutput('5')">5</button><button class="button" onclick="appendToOutput('6')">6</button><button class="button" onclick="appendToOutput('+')">+</button><button class="button" onclick="appendToOutput('1')">1</button><button class="button" onclick="appendToOutput('2')">2</button><button class="button" onclick="appendToOutput('3')">3</button><button class="button equals" onclick="calculate()">=</button><button class="button" onclick="appendToOutput('0')">0</button><button class="button" onclick="appendToOutput('.')">.</button>
</div>
CSS代碼，主要設置了背景、計算機板和按鈕等等的顏色。
body { /*背景*/background-color: #f2f2f2;font-family: Arial, sans-serif;
}.container { /*計算機板*/margin: auto;margin-top: 100px;width: 300px;padding: 10px;border: 1px solid #ccc;background-color: #fff;box-shadow: 0px 0px 10px #ccc;
}.output { /*輸入或者按下的內容字體*/font-size: 2em;text-align: right;padding: 10px;background-color: #eee;border: 1px solid #ccc;
}.button { /*正常按鈕*/font-size: 1.5em;margin: 5px;width: 50px;height: 50px;border: none;background-color: #ccc;color: #fff;cursor: pointer;
}.button:hover { /*鼠標碰到按鈕時按鈕變色*/background-color: #999;
}.clear { /*清屏*/background-color: #ff6666;
}.equals { /*等于號顏色*/background-color: #666666;
}
javascript代碼，主要設置了對應按鈕按下的顯示、計算、清零的工作。
let output = document.getElementById("output"); // 輸入內容function appendToOutput(value) {if (output.innerHTML === "0") {output.innerHTML = value; // 直接顯示} else {output.innerHTML += value; // 列出一個算式}
}function clearOutput() { // 清零output.innerHTML = "0";
}function calculate() { // 計算output.innerHTML = eval(output.innerHTML);
}
總結：
這是一個簡單的計算器，使用HTML、CSS和JavaScript實現。HTML代碼創建了一個計算器的界面，CSS代碼設置了計算器的樣式，JavaScript代碼實現了計算器的功能。具體來說，JavaScript代碼實現了框架的三個核心功能：
- appendToOutput()函數：該函數將按鈕的值添加到輸出框。
- clearOutput()函數：該函數清空輸出框。
- calculate()函數：該函數使用eval()函數計算輸出框中的表達式。
這個計算器可以執行加、減、乘、除和取模運算。同時，它還支持小數點和多位數運算。需要注意的是，eval()函數可能會導致安全問題，因此在實際應用中需要采取安全措施。
