首页用html制作一个计算机

用html制作一个计算机

时间: 2024-11-05 15:29:35 浏览: 14

在HTML中创建一个简单的计算机模拟页面，通常会利用基本的HTML元素和CSS样式来展示外观。这里是一个简化的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>简易计算机模拟</title> <style> .computer { width: 400px; height: 250px; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; } button { padding: 10px 20px; font-size: 16px; margin: 5px; background-color: #3399ff; color: white; border: none; cursor: pointer; } </style> </head> <body> <div class="computer"> <button id="btnAdd">+</button> <button id="btnSubtract">-</button> <input type="number" id="display" value="0" readonly> <button id="btnMultiply">*</button> <button id="btnDivide">/</button> <button onclick="clearDisplay()">C</button> </div> <script> function clearDisplay() { document.getElementById("display").value = "0"; } // 这里仅示例加法操作，其他运算需要类似处理 document.getElementById("btnAdd").addEventListener("click", function() { var num1 = parseFloat(document.getElementById("display").value); var num2 = prompt("请输入第二个数字"); if (num2) { document.getElementById("display").value = num1 + num2; } }); </script> </body> </html> ``` 这个代码展示了基本的计算功能，包括显示区、按钮（+、-、*、/）以及清零(C)按钮。实际的计算操作可以通过JavaScript来实现。点击按钮时，它会触发相应的事件处理器函数来进行数值输入。

阅读全文