JavaScript 实例是一种用于演示和教学的代码示例，通常用于展示特定的功能或概念。通过编写和运行这些实例，开发者可以更好地理解 JavaScript 语言的特性和用法。这些实例通常包括简单的示例代码和相应的结果展示，帮助开发者更快地学习和掌握 JavaScript。
JavaScript 实例：计算器
一个小小地计算器可以帮助我们快速进行一些简单的计算。下面就是一个 JavaScript 实现的计算器，可以进行加、减、乘、除的计算。
首先需要在 HTML 中创建基本框架：
<html>
<head>
<title>JS Calculator</title>
<script>
// JavaScript 实现
</script>
</head>
<body>
<input type="text" id="input" />
<table>
<tr>
<td><button onclick="addToInput('7')">7</button></td>
<td><button onclick="addToInput('8')">8</button></td>
<td><button onclick="addToInput('9')">9</button></td>
<td><button onclick="addToInput('/')">/</button></td>
</tr>
<tr>
<td><button onclick="addToInput('4')">4</button></td>
<td><button onclick="addToInput('5')">5</button></td>
<td><button onclick="addToInput('6')">6</button></td>
<td><button onclick="addToInput('*')">*</button></td>
</tr>
<tr>
<td><button onclick="addToInput('1')">1</button></td>
<td><button onclick="addToInput('2')">2</button></td>
<td><button onclick="addToInput('3')">3</button></td>
<td><button onclick="addToInput('-')">-</button></td>
</tr>
<tr>
<td><button onclick="addToInput('0')">0</button></td>
<td><button onclick="addToInput('.')">.</button></td>
<td><button onclick="calculate()">=</button></td>
<td><button onclick="addToInput('+')">+</button></td>
</tr>
</table>
</body>
</html>以上就是基本的 HTML 结构。注意到我们将 input 标签添加了一个 id 属性，这是为了在 JavaScript 中方便获取和操作输入的值。
接下来，我们需要通过 JavaScript 实现计算器的逻辑。我们需要编写两个函数，分别是 addToInput() 和 calculate()。
下面是创建这两个函数：
<script>
function addToInput(char) {
document.getElementById("input").value += char;
}
function calculate() {
var input = document.getElementById("input").value;
var result = eval(input);
document.getElementById("input").value = result;
}
</script>addToInput() 函数接受一个参数（字符），然后将它添加到输入框中（即 input 标签）的值的末尾。
calculate() 函数首先得到输入框中的值，并使用 eval() 函数将字符串转换为 JavaScript 表达式进行计算。最后将结果写入输入框（如果没有计算错误的话）。
最后，我们再用 CSS 样式美化一下我们的计算器：
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 12px 24px;
cursor: pointer;
font-size: 18px;
margin: 5px;
}
input[type="text"] {
width: 485px;
margin-bottom: 10px;
font-size: 24px;
padding: 10px;
border-radius: 5px;
border: none;
margin-right: 5px;
float: left;
}
table {
margin-top: 10px;
clear: both;
border-collapse: collapse;
}
td {
padding: 10px;
text-align: center;
border: 1px solid #ddd;
}最终的效果可以通过 CodePen 查看。
