简易计算器1.0
一、HTML 基础结构解析
首先看整个 HTML 文档的基本结构，基本如下：
html
<!DOCTYPE html>
<html>
<head>
<title>简单表单</title>
</head>
<body>
<!-- 页面内容（省略） -->
</body>
</html><!DOCTYPE html>- 这是文档类型声明，告诉浏览器这是一个 HTML5 文档。<html>标签 - 整个 HTML 文档的根标签，所有内容都包含在其中。<head>标签 - 包含文档的元数据，如标题、字符编码、引入的外部资源等。<title>标签 - 设置浏览器标签页上显示的标题。<body>标签 - 包含所有可见的页面内容，如文本、按钮、图片等。
二、页面内容详解
现在设计一个简易计算器1.0页面：就包括一个名称，一个输入框，一个"计算"的按钮。
html
<div style="text-align: center;">
<h3>简单计算器</h3>
<input type="text" id="userInput" placeholder="输入内容">
<button onclick="calculate()">计算</button>
<p id="result"></p>
</div>-
<div style="text-align: center;">- 创建一个区块容器，并将其中的内容居中显示。 -
<input>标签 - 创建一个输入框：type="text"- 指定输入框类型为文本输入id="userInput"- 为元素指定唯一标识符，方便后续通过 JavaScript 访问placeholder="输入内容"- 提供提示文本，当输入框为空时显示
-
<button>标签 - 创建一个按钮：onclick="calculate()"- 定义按钮的点击事件，当按钮被点击时执行calculate()函数
三、JavaScript 交互详解
接下来看页面底部的<script>标签：
html
<script>
function calculate() {
const input = document.getElementById('userInput').value;
document.getElementById('result').innerHTML = '计算结果：' + input;
}
</script>-
<script>标签 - 用于包含 JavaScript 代码，可放在 HTML 文档的任何位置，通常放在<body>标签的末尾以便页面元素先加载完成。 -
function calculate() { ... }- 定义了一个名为calculate的函数，这就是按钮点击时会执行的函数。 -
document.getElementById('userInput')- 通过元素的 id 获取输入框元素。document是 JavaScript 中表示整个 HTML 文档的对象，getElementById是它的一个方法，用于查找具有指定 id 的元素。 -
.value- 获取输入框中的值。所有表单元素 (如 input、textarea 等) 都有一个value属性，用于获取或设置其内容。 -
document.getElementById('result').innerHTML = ...- 通过 id 获取结果段落元素，并设置其innerHTML属性。innerHTML表示元素内部的 HTML 内容，可以用来动态更新页面显示。 -
'计算结果：' + input- 将字符串 "计算结果：" 与用户输入的值拼接起来，形成最终要显示的内容。
四、完整工作流程
当用户访问这个页面并进行交互时，发生的事情是这样的：
- 浏览器加载 HTML 文件，解析并显示页面元素
- 用户在输入框中输入一些文本
- 用户点击 "计算" 按钮
- 按钮的
onclick事件触发calculate()函数 - JavaScript 代码获取输入框的值
- JavaScript 代码将结果显示在页面上
五、完整代码与显示页面效果
html
<!DOCTYPE html>
<html>
<head>
<title>简单表单</title>
</head>
<body>
<div style="text-align: center;">
<h3>简单计算器</h3>
<input type="text" id="userInput" placeholder="输入内容">
<button onclick="calculate()">计算</button>
<p id="result"></p>
</div>
<script>
function calculate() {
const input = document.getElementById('userInput').value;
document.getElementById('result').innerHTML = '计算结果：' + input;
}
</script>
</body>
</html>
PS：这里的运算逻辑暂时先不考虑，主要是为了学习前端页面。
简易计算器2.0
接下来继续设计简易计算器2.0，加入CSS的学习
一、添加内联 CSS 样式
首先，我们在<head>标签中添加一个<style>标签，用来存放 CSS 代码：
html
<!DOCTYPE html>
<html>
<head>
<title>简单表单</title>
<style>...此处省略...</style>
</head>
<body>
<!-- 页面内容（省略） -->
</body>
</html>往style标签里面添加CSS代码，先一步一步来：
1.选择器与声明块：
html
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}body是选择器，选中 HTML 中的 body 元素- 大括号内是声明块，包含一个或多个属性值对
font-family设置字体，多个字体是备用方案background-color设置背景颜色，使用十六进制颜色码
2.类选择器：
html
.container {
max-width: 400px;
margin: 0 auto;
}- .container 选中所有 ++class="container"++ 的元素
max-width设置最大宽度，使容器在大屏幕上不会太宽margin: 0 auto水平居中元素
3.元素组合选择器：
html
input, button {
width: 100%;
padding: 10px;
}- 逗号分隔的选择器同时应用样式
width: 100%让元素占满父容器宽度padding设置内边距，增加元素内部空间
4.伪类选择器：
html
button:hover {
background-color: #45a049;
}- :hover 是伪类，当鼠标悬停在元素上时生效
- 这里实现了按钮的悬停效果，让颜色变深
5.ID 选择器：
html
#result {
margin-top: 15px;
background-color: #e8f5e9;
}- #result 选中 ++id="result"++ 的元素
- 为结果区域添加了上边距和背景色
二、修改 HTML 结构应用样式
div标签应用上class选择器，Input标签应用上id选择器
html
<div class="container">
<h3>简单计算器</h3>
<input type="text" id="userInput" placeholder="输入内容">
<button onclick="calculate()">计算</button>
<p id="result"></p>
</div>PS：
- id选择器对应的是#
- class选择器对应的是.
三、完整代码与显示页面效果
html
<!DOCTYPE html>
<html>
<head>
<title>简单表单</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: white;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
input, button {
width: 100%;
padding: 10px;
margin: 8px 0;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 15px;
padding: 10px;
background-color: #e8f5e9;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="container">
<h3>简单计算器</h3>
<input type="text" id="userInput" placeholder="输入内容">
<button onclick="calculate()">计算</button>
<p id="result"></p>
</div>
<script>
function calculate() {
const input = document.getElementById('userInput').value;
document.getElementById('result').innerHTML = '计算结果：' + input;
}
</script>
</body>
</html>
简易计算器3.0
现在不想要输入框了，想改成1234567890和加减乘除一个一个的按钮，并且上方有一个显示框，用户点击数字或者运算符可以显示在显示框内，计算按钮不变。大体是这样，模仿传统计算器。
直接给出完整代码（里面都有注释）：
html
<!DOCTYPE html> <!--文档类型声明，告诉浏览器这是一个 HTML5 文档-->
<html lang="en"> <!--根标签, 设置文档语言为英语-->
<head> <!--包含文档的元数据，如标题、字符编码、引入的外部资源等-->
<title>简单表单</title>
<address>
Written by island.</br>
Time:2025-06-10
</address>
<!-- 存放 CSS 代码 -->
<style>
body { /* 选择器，选中 HTML 中的 body 元素 */
font-family:Arial, sans-serif; /* 设置页面的字体, 多个字体是备用方案*/
background-color: #f4f4f4; /* 设置页面背景颜色, 使用十六进制颜色码*/
}
.container { /* 选中所有 class="container" 的元素来应用 CSS 样式 */
max-width: 300px; /* 设置容器的最大宽度 */
margin: 0 auto; /* 水平居中容器 */
padding: 20px; /* 设置容器内边距 */
background-color: #fff; /* 设置容器背景颜色 */
border-radius: 5px; /* 设置容器圆角 */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 设置容器阴影 */
}
.display {
width: 100%; /* 输入框和按钮宽度占满容器 */
padding: 10px; /* 设置输入框和按钮内边距 */
margin-bottom: 15px;
box-sizing: border-box;
text-align: right;
font-size: 1.2em;
border: 1px solid #ddd;
border-radius: 3px; /* 设置圆角 */
}
.buttons {
display: grid; /* 使用网格布局 */
grid-template-columns: repeat(4, 1fr); /* 设置四列等宽 */
gap: 10px; /* 设置按钮之间的间距 */
}
button {
padding: 10px;
background-color: #f1f1f1;
border: 1px solid #ddd;
border-radius: 3px;
cursor: pointer; /* 鼠标悬停时显示手型光标 */
font-size: 1em; /* 设置按钮文字大小 */
}
button:hover { /* :hover 是伪类，当鼠标悬停在元素上时生效 */
background-color: #e1e1e1; /* 鼠标悬停时改变按钮背景颜色 */
}
.operator { /* 选中 class="operator" 的元素来应用 CSS 样式 */
background-color: #4CAF50; /* 设置运算符按钮的背景颜色 */
color: white; /* 设置运算符按钮文字颜色为白色 */
}
.operator:hover {
background-color: #45a049;
}
.calculate {
background-color: #2196F3;
color: white;
grid-column: span 4;
}
.calculate:hover {
background-color: #0b7dda;
}
</style>
</head>
<body> <!--文档的主体内容, 包含所有可见的页面内容，如文本、按钮、图片等-->
<div class="container"> <!--使用类名 container 来应用 CSS 样式-->
<h3>Island的计算器</h3>
<input type="text" id="display" class="display" readonly> <!--readonly 属性使输入框只读，用户无法编辑内容-->
<div class="buttons">
<button onclick="appendToDisplay('7')">7</button> <!--将字符串 '7' 作为参数传入函数appendToDisplay-->
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button class="operator" onclick="appendToDisplay('+')">+</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button class="operator" onclick="appendToDisplay('-')">-</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button class="operator" onclick="appendToDisplay('*')">*</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="clearDisplay()">C</button> <!--点击 C 按钮时调用 clearDisplay 函数-->
<button onclick="appendToDisplay('.')">.</button>
<button class="operator" onclick="appendToDisplay('/')">/</button>
<button class="calculate" onclick="calculate()">计算</button> <!--点击等于按钮时调用 calculate 函数-->
</div>
<!--id: 为元素指定唯一标识符，方便后续通过 JavaScript 访问 ; placeholder: 提供提示文本，当输入框为空时显示-->
<!--按钮点击时触发 JavaScript 函数 calculate()，计算输入的表达式-->
<p id="result"></p>
</div>
<!--JavaScript 代码通常放在<body>标签的末尾以便页面元素先加载完成-->
<script>
// appendToDisplay 函数用于将按钮点击的数字或运算符添加到显示区域
function appendToDisplay(value) {
// document.getElementById('display') 获取 id 为 display 的元素
const display = document.getElementById('display');
// 将传入的 value 添加到显示区域的当前值后面
display.value += value;
}
function clearDisplay() {
// 清空显示区域
document.getElementById('display').value = '';
}
function calculate(){
try {
// document是 JavaScript 中表示整个 HTML 文档的对象，getElementById是它的一个方法，用于查找具有指定 id 的元素
// innerHTML表示元素内部的 HTML 内容，可以用来动态更新页面显示
const expression = document.getElementById('display').value; // 获取显示区域的值
const result = eval(expression); // 使用 eval 函数计算表达式的值
document.getElementById('result').innerHTML = '计算结果: ' + result; // 显示计算结果
} catch (error) {
document.getElementById('result').innerHTML = '错误: ' + error.message; // 如果计算出错，显示错误信息
}
}
</script>
</body>
</html>
