1. 创建一个简单的计算器
在这篇文章中，我们将探讨如何使用 HTML、CSS 和 JavaScript 来创建一个简单的计算器。这个计算器将具有基本的加减乘除功能，并且具有一个清除按钮。
2. HTML 结构
首先，我们需要创建 HTML 结构。这里有一个简单的计算器布局：
<div class="calculator">
<div class="screen">
<input type="text" id="result" readonly>
</div>
<div class="buttons">
<button onclick="clearScreen()" class="clear">AC</button>
<button onclick="addToScreen('/')">/</button>
<button onclick="addToScreen('*')">*</button>
<button onclick="addToScreen('-')">-</button>
<button onclick="addToScreen('7')">7</button>
<button onclick="addToScreen('8')">8</button>
<button onclick="addToScreen('9')">9</button>
<button onclick="addToScreen('+')">+</button>
<button onclick="addToScreen('4')">4</button>
<button onclick="addToScreen('5')">5</button>
<button onclick="addToScreen('6')">6</button>
<button onclick="addToScreen('1')">1</button>
<button onclick="addToScreen('2')">2</button>
<button onclick="addToScreen('3')">3</button>
<button onclick="addToScreen('0')">0</button>
<button onclick="addToScreen('.')">.</button>
<button onclick="calculateResult()" class="equals">=</button>
</div>
</div>
在这个 HTML 结构中，我们创建了一个计算器容器 "calculator"，它包含了一个屏幕 "screen" 和按钮 "buttons"，其中屏幕是一个只读文本输入框 "input"，用于显示计算结果。按钮通过运行 JavaScript 函数来实现加、减、乘、除等功能。我们还创建了一个按钮来清除屏幕，以便用户可以开始新运算。
3. CSS 样式
接下来，我们需要为 HTML 结构添加一些样式。这里是一个简单的 CSS 样式：
.calculator {
width: 250px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
.screen {
height: 60px;
background-color: #f3f3f3;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0 10px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1px;
}
button {
width: 100%;
height: 40px;
font-size: 18px;
background-color: #fff;
border: none;
outline: none;
}
button:hover {
background-color: #e6e6e6;
}
button.clear {
background-color: #ff9999;
}
button.equals {
background-color: #99ccff;
}
在这些样式中，我们设置了计算器的宽度，圆角边框和屏幕高度。我们还创建了一个 "grid" 布局来排列按钮，并为按钮设置了通用的样式。我们还创建了两个特殊按钮的样式："clear" 和 "equals"。清除按钮使用红色背景颜色，等于号按钮使用蓝绿色背景颜色。
4. JavaScript 功能
现在，让我们添加一些 JavaScript 功能，使计算器正常工作。我们将创建三个函数：addToScreen、calculateResult 和 clearScreen。首先，让我们看看 addToScreen 函数：
function addToScreen(value) {
var screen = document.getElementById("result");
screen.value += value;
}
这个函数获取屏幕输入框的值，并将被点击的按钮的值添加到屏幕中。例如，如果点击了数字按钮“1”，则屏幕上将显示“1”。
接下来是 calculateResult 函数：
function calculateResult() {
var screen = document.getElementById("result");
var result = eval(screen.value);
screen.value = result;
}
此函数获取屏幕输入框的值，并使用 eval 函数对表达式求值。然后将结果显示在屏幕上。
最后是清除屏幕的 clearScreen 函数：
function clearScreen() {
var screen = document.getElementById("result");
screen.value = "";
}
这个函数简单地将屏幕输入框清空。
5. 完整代码
现在，让我们将上述 HTML、CSS 和 JavaScript 代码组合起来，以创建一个完整的计算器：
<html>
<head>
<title>简单的计算器</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="calculator">
<div class="screen">
<input type="text" id="result" readonly>
</div>
<div class="buttons">
<button onclick="clearScreen()" class="clear">AC</button>
<button onclick="addToScreen('/')">/</button>
<button onclick="addToScreen('*')">*</button>
<button onclick="addToScreen('-')">-</button>
<button onclick="addToScreen('7')">7</button>
<button onclick="addToScreen('8')">8</button>
<button onclick="addToScreen('9')">9</button>
<button onclick="addToScreen('+')">+</button>
<button onclick="addToScreen('4')">4</button>
<button onclick="addToScreen('5')">5</button>
<button onclick="addToScreen('6')">6</button>
<button onclick="addToScreen('1')">1</button>
<button onclick="addToScreen('2')">2</button>
<button onclick="addToScreen('3')">3</button>
<button onclick="addToScreen('0')">0</button>
<button onclick="addToScreen('.')">.</button>
<button onclick="calculateResult()" class="equals">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
现在我们已经可以运行一个基本的计算器了！
6. 总结
在本文中，我们展示了如何使用 HTML、CSS 和 JavaScript 来创建一个简单的计算器。我们创建了一个基本的 HTML 结构，添加了样式并实现了 JavaScript 功能，以便计算器可以进行加、减、乘、除和清除操作。我们希望这个例子可以帮助你更好地理解如何使用这些前端技术。