当前位置：首页 > news >正文

HMTL+CSS+JS-新手小白循序渐进案例入门

news 2025/6/12 18:01:28

简易计算器1.0

一、HTML 基础结构解析

首先看整个 HTML 文档的基本结构，基本如下：

<!DOCTYPE html>
<html>
<head><title>简单表单</title>
</head>
<body><!-- 页面内容（省略） -->
</body>
</html>

<!DOCTYPE html> - 这是文档类型声明，告诉浏览器这是一个 HTML5 文档。
<html>标签 - 整个 HTML 文档的根标签，所有内容都包含在其中。
<head>标签 - 包含文档的元数据，如标题、字符编码、引入的外部资源等。
<title>标签 - 设置浏览器标签页上显示的标题。
<body>标签 - 包含所有可见的页面内容，如文本、按钮、图片等。

二、页面内容详解

现在设计一个简易计算器1.0页面：就包括一个名称，一个输入框，一个“计算”的按钮。

<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>标签：

<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 代码将结果显示在页面上

五、完整代码与显示页面效果

<!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 代码：

<!DOCTYPE html>
<html>
<head><title>简单表单</title><style>...此处省略...</style>
</head>
<body><!-- 页面内容（省略） -->
</body>
</html>

往style标签里面添加CSS代码，先一步一步来：

1.选择器与声明块：

body {font-family: Arial, sans-serif;background-color: #f4f4f4;
}

body 是选择器，选中 HTML 中的 body 元素
大括号内是声明块，包含一个或多个属性值对
font-family 设置字体，多个字体是备用方案
background-color 设置背景颜色，使用十六进制颜色码

2.类选择器：

.container {max-width: 400px;margin: 0 auto;
}

.container 选中所有 class="container" 的元素
max-width 设置最大宽度，使容器在大屏幕上不会太宽
margin: 0 auto 水平居中元素

3.元素组合选择器：

input, button {width: 100%;padding: 10px;
}

逗号分隔的选择器同时应用样式
width: 100% 让元素占满父容器宽度
padding 设置内边距，增加元素内部空间

4.伪类选择器：

button:hover {background-color: #45a049;
}

:hover 是伪类，当鼠标悬停在元素上时生效
这里实现了按钮的悬停效果，让颜色变深

5.ID 选择器：

#result {margin-top: 15px;background-color: #e8f5e9;
}

#result 选中 id="result" 的元素
为结果区域添加了上边距和背景色

二、修改 HTML 结构应用样式

div标签应用上class选择器，Input标签应用上id选择器

<div class="container"><h3>简单计算器</h3><input type="text" id="userInput" placeholder="输入内容"><button onclick="calculate()">计算</button><p id="result"></p>
</div>

PS：

id选择器对应的是#
class选择器对应的是.

三、完整代码与显示页面效果

<!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和加减乘除一个一个的按钮，并且上方有一个显示框，用户点击数字或者运算符可以显示在显示框内，计算按钮不变。大体是这样，模仿传统计算器。

直接给出完整代码（里面都有注释）：

<!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>