2023-05-01 02:49:30
Human: Code sử dụng HTML,CSS, javascript/ hoặc jQuery để tạo máy tính cá nhân đơn giản
AI: Dưới đây là mã cho một máy tính cá nhân đơn giản sử dụng HTML, CSS và JavaScript:
1. Tạo một tệp HTML và dán đoạn mã sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<input type="text" class="display" id="display" readonly>
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="appendNumber('7')">7</button>
<button onclick="appendNumber('8')">8</button>
<button onclick="appendNumber('9')">9</button>
<button onclick="appendOperator('+')">+</button>
<button onclick="appendNumber('4')">4</button>
<button onclick="appendNumber('5')">5</button>
<button onclick="appendNumber('6')">6</button>
<button onclick="appendOperator('-')">-</button>
<button onclick="appendNumber('1')">1</button>
<button onclick="appendNumber('2')">2</button>
<button onclick="appendNumber('3')">3</button>
<button onclick="appendOperator('*')">*</button>
<button onclick="appendNumber('0')">0</button>
<button onclick="calculateResult()">=</button>
<button onclick="appendOperator('/')">/</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2. Tạo một tệp CSS và dán đoạn mã sau:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
.calculator {
border: 1px solid #ccc;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.display {
width: 100%;
padding: 20px;
font-size: 24px;
text-align: right;
border: none;
outline: none;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2px;
}
button {
width: 100%;
padding: 20px;
font-size: 18px;
border: none;
cursor: pointer;
background-color: #f1f1f1;
}
button:hover {
background-color: #ddd;
}
button:active {
background-color: #ccc;
}
3. Tạo một tệp JavaScript và dán đoạn mã sau:
const display = document.getElementById("display");
function appendNumber(number) {
display.value += number;
}
function appendOperator(operator) {
let lastChar = display.value.slice(-1);
if (lastChar !== "+" && lastChar !== "-" && lastChar !== "*" && lastChar !== "/") {
display.value += operator;
}
}
function clearDisplay() {
display.value = "";
}
function calculateResult() {
try {
display.value = eval(display.value);
} catch (e) {
display.value = "Error";
setTimeout(() => clearDisplay(), 1000);
}
}
Trước tiên, hãy đảm bảo rằng bạn đã liên kết các tệp CSS và JavaScript với tệp HTML của bạn bằng cách thêm đoạn mã sau vào phần `<head>` của tệp HTML của bạn:
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
Sau đó, bạn có thể mở tệp HTML của bạn trong trình duyệt của mình để kiểm tra máy tính cá nhân của bạn!