Jack个人博客 - 编程技巧
https://blog.hkmre.top/index.php/category/%E7%BC%96%E7%A8%8B%E6%8A%80%E5%B7%A7/
魔术技巧~~~
-
JS 快速入门：从 HTML/CSS 到交互网页的基础指南
https://blog.hkmre.top/index.php/archives/13/
2025-08-31T21:22:00+08:00
JS 快速学习入门：从 HTML/CSS 到交互网页的进阶指南对于刚学完 HTML 和 CSS 的小伙伴来说，JS（JavaScript）是让网页 “动起来” 的关键 —— 它能实现表单验证、动态内容更新、交互效果等 HTML/CSS 无法完成的功能。这篇文章将带你跳过复杂概念，聚焦 “实用派” 入门：从环境搭建到语法核心，再到结合网页的实战案例，帮你快速掌握 JS 基础并上手开发。一、先搞懂：JS 怎么和 HTML/CSS 配合？在学语法前，先明确 JS 在网页中的 “位置” 和运行方式，这是衔接 HTML/CSS 的核心。1. JS 的 3 种引入方式（直接用 HTML 写）和 CSS 的内联、内嵌、外部引入类似，JS 也有 3 种嵌入网页的方式，新手建议从 “外部引入” 开始（便于维护）。（1）内嵌式（写在 HTML 的<script>标签里）直接在 HTML 文件中用<script>包裹 JS 代码，通常放在<body>末尾（确保 HTML 加载完再执行 JS）：<!DOCTYPE html>
<html>
<body>
<h1 id="title">Hello HTML/CSS!\</h1>
<!-- JS放在body末尾 -->
<script>
// 这里写JS代码：修改h1的内容
document.getElementById("title").innerText = "Hello JS!";
</script>
</body>
</html>（2）外部引入（推荐！写在单独的.js 文件里）新建一个index.js文件（和 HTML 同目录）；在 HTML 中用<script src="路径">引入：<!-- HTML文件 -->
<body>
<h1 id="title">Hello HTML/CSS!\</h1>
<!-- 引入外部JS -->
<script src="index.js"></script>
</body>//index.js文件
document.getElementById("title").innerText = "JS从外部来！";（3）内联式（写在 HTML 标签的属性里，不推荐）直接把 JS 写在onclick等属性中，仅适合简单场景：<button onclick="alert('你点我了！')">点我试试\</button>2. 调试工具：用浏览器控制台看效果写 JS 时难免出错，浏览器的 “控制台” 是调试神器：打开网页，按F12或右键 “检查”；切换到 “Console”（控制台）面板：直接输入 JS 代码按回车，实时看结果；代码出错时，这里会显示错误原因和行数。二、JS 语法核心：30 分钟掌握最常用基础JS 语法和 HTML/CSS 不同，但核心基础很简单，重点记 “实用高频” 的内容即可。1. 变量与数据类型：存储数据的 “容器”变量是用来存储数据的，比如用户输入的内容、计算结果等。（1）声明变量：3 个关键字关键字特点推荐场景let可修改、块级作用域（最常用）存储会变化的值（如计数器、用户输入）const不可修改（常量）存储固定值（如网址、固定参数）var全局作用域（旧语法，不推荐）尽量不用示例：结合网页的变量使用// 1. 存储固定的网页标题（用const）
const pageTitle = "我的第一个JS网页";
// 2. 存储用户输入的用户名（用let，因为会变化）
let username = document.getElementById("username").value;
// 3. 修改变量的值（let可以改，const不行）
username = "新用户名";（2）5 种常用数据类型不用死记，通过例子理解：let num = 100; // 数字（整数、小数都算）
let str = "Hello JS"; // 字符串（用单引号或双引号包裹）
let isShow = true; // 布尔值（只有true/false两种）
let arr = [1, 2, 3]; // 数组（存储多个值）
let obj = {name: "张三", age: 20}; // 对象（存储键值对，如用户信息）举一反三：用变量存储网页中的 “商品价格” 和 “商品列表”// 商品价格（数字类型）
let price = 99.9;
// 商品列表（数组类型，每个元素是对象）
let goodsList = [
{name: "T恤", price: 59},
{name: "裤子", price: 89}
];2. 运算符：做计算或判断和数学中的运算符类似，重点记 “赋值”“比较”“逻辑” 三类。（1）赋值运算符（给变量赋值）let a = 10;
a += 5; // 等价于 a = a + 5 → 结果15
a *= 2; // 等价于 a = a * 2 → 结果30（2）比较运算符（判断两个值的关系）常用于 “条件判断”，返回true或false：let x = 10;
console.log(x > 5); // true
console.log(x === 10); // 全等（值和类型都一样，推荐用===不用==）
console.log(x != 8); // true（3）逻辑运算符（组合多个判断）运算符作用示例结果&&与（两个都为 true 才 true）(x>5) && (x<15)true\ \或（一个为 true 就 true）!非（取反）!(x===10)false3. 条件语句：让 JS “做选择”根据不同条件执行不同代码，最常用if...else和switch。（1）if...else（多条件判断）示例：网页表单验证（判断用户名是否为空）<!-- HTML：用户名输入框 -->
<input type="text" id="username" placeholder="请输入用户名">
<button onclick="checkUsername()">提交</button>// JS：验证函数
function checkUsername() {
let username = document.getElementById("username").value;
if (username === "") { // 条件1：为空
alert("用户名不能为空！");
} else if (username.length < 3) { // 条件2：长度不够
alert("用户名至少3个字符！");
} else { // 都不满足（条件成立）
alert("用户名合法！");
}
}（2）switch（固定值匹配）示例：根据用户选择的 “颜色” 修改网页背景<select id="colorSelect" onchange="changeBg()">
<option value="white">白色</option>
<option value="lightblue">蓝色</option>
<option value="lightgreen">绿色</option>
</select>function changeBg() {
let color = document.getElementById("colorSelect").value;
switch (color) {
case "white":
document.body.style.backgroundColor = "white";
break; // 必须加break，否则会继续执行下一个case
case "lightblue":
document.body.style.backgroundColor = "lightblue";
break;
case "lightgreen":
document.body.style.backgroundColor = "lightgreen";
break;
}
}举一反三：扩展表单验证，增加 “密码是否一致” 的判断<input type="password" id="pwd1" placeholder="密码">
<input type="password" id="pwd2" placeholder="确认密码">
<button onclick="checkPwd()">验证密码</button>function checkPwd() {
let pwd1 = document.getElementById("pwd1").value;
let pwd2 = document.getElementById("pwd2").value;
if (pwd1 === "") {
alert("请输入密码！");
} else if (pwd1 !== pwd2) {
alert("两次密码不一致！");
} else {
alert("密码一致！");
}
}4. 循环语句：重复执行代码当需要 “批量处理”（如遍历数组、生成列表）时用循环，最常用for和for...of。（1）for 循环（适合已知循环次数）示例：根据数组生成网页列表<!-- HTML：空列表 -->
<ul id="goodsList"></ul>// JS：商品数组
let goods = ["T恤", "裤子", "鞋子", "帽子"];
// 获取列表元素
let list = document.getElementById("goodsList");
// for循环遍历数组
for (let i = 0; i < goods.length; i++) {
// 每次循环添加一个li到列表
list.innerHTML += `<li>${goods[i]}</li>`;
}i是 “计数器”，从 0 开始；i < goods.length：循环条件（只要 i 小于数组长度就继续）；i++：每次循环后 i 加 1。（2）for...of 循环（适合遍历数组 / 字符串，更简洁）let goods = ["T恤", "裤子", "鞋子"];
for (let item of goods) {
  console.log(item); // 依次输出：T恤、裤子、鞋子
}举一反三：用循环计算数组中 “商品总价”let goodsPrice = [59, 89, 129, 39];
let total = 0;
for (let price of goodsPrice) {
total += price; // 累加每个商品价格
}
console.log("总价：" + total); // 输出：316三、JS 核心：函数与方法（重点！）函数是 “可重复调用的代码块”，方法是 “对象中的函数”。掌握常用函数和方法，能大幅提升开发效率。1. 自定义函数：把重复代码 “封装” 起来当一段代码需要多次执行（如表单验证、样式修改）时，就把它封装成函数。（1）函数的基本语法// 定义函数
function 函数名(参数1, 参数2) {
// 函数体（要执行的代码）
return 返回值; // 可选：返回函数执行结果
}
// 调用函数
函数名(实参1, 实参2);（2）示例：封装 “计算两个数之和” 的函数// 定义函数：参数a和b，返回它们的和
function add(a, b) {
return a + b;
}
// 调用函数：传入实参3和5，接收返回值
let result = add(3, 5);
console.log(result); // 输出8
// 结合网页：点击按钮计算总价
function calculateTotal(price, count) {
return price * count;
}<button onclick="alert('总价：' + calculateTotal(99, 2))">计算2件商品总价</button>举一反三：封装 “修改元素样式” 的函数（可复用给多个元素）// 定义函数：参数1=元素ID，参数2=样式对象
function setStyle(elementId, styles) {
let elem = document.getElementById(elementId);
// 遍历样式对象，批量设置样式
for (let key in styles) {
elem.style\[key] = styles\[key];
}
}
// 调用函数：修改h1和p的样式
setStyle("title", {color: "red", fontSize: "24px"});
setStyle("content", {lineHeight: "1.8", color: "#333"});2. 常用内置函数（JS 自带，直接用）无需定义，直接调用的函数，重点记这 3 个：函数作用示例alert(内容)弹出提示框alert("操作成功！")console.log(内容)在控制台输出（调试用）console.log("当前值：" + x)prompt(提示语, 默认值)弹出输入框，返回用户输入的内容let age = prompt("请输入年龄", 18)3. 常用对象方法（数组、字符串、DOM）方法是 “对象。方法名 ()” 的形式，重点掌握数组、字符串和 DOM 操作的方法。（1）数组方法（处理批量数据）方法作用示例结果push(元素)向数组末尾添加元素let arr = [1,2]; arr.push(3)[1,2,3]filter(条件)筛选符合条件的元素arr.filter(item => item > 2)[3]map(处理函数)对每个元素做处理，返回新数组arr.map(item => item * 2)[2,4,6]join(分隔符)把数组转成字符串arr.join("-")"1-2-3"示例：用数组方法筛选网页中的 “低价商品”let goods = [
{name: "T恤", price: 59},
{name: "裤子", price: 89},
{name: "袜子", price: 9}
];
// 筛选价格<30的商品
let cheapGoods = goods.filter(item => item.price < 30);
console.log(cheapGoods); // 输出：[{name: "袜子", price: 9}]（2）字符串方法（处理文本）方法作用示例结果length获取字符串长度"hello".length5includes(子串)判断是否包含子串"hello".includes("he")truetrim()去除首尾空格" js ".trim()"js"replace(旧值, 新值)替换字符"hello".replace("h", "H")"Hello"示例：处理用户输入的 “手机号”（去除空格）let phone = document.getElementById("phone").value;
// 去除空格并判断长度是否为11
let cleanPhone = phone.trim();
if (cleanPhone.length !== 11) {
alert("手机号格式错误！");
}（3）DOM 操作方法（核心！控制 HTML 元素）DOM（文档对象模型）是 JS 操作 HTML 的接口，重点记 “获取元素”“修改内容 / 样式”“绑定事件” 三类方法。操作类型方法示例获取元素getElementById(id)document.getElementById("title")（通过 ID 获取，最常用） querySelector(选择器)document.querySelector(".box")（支持 CSS 选择器，如.class、#id）修改内容innerText纯文本内容（elem.innerText = "新文本"） innerHTML带 HTML 标签的内容（elem.innerHTML = "<b>加粗</b>"）修改样式style.样式名elem.style.color = "red"（样式名用驼峰式，如 fontSize） classList.add/remove操作 CSS 类（elem.classList.add("active")）绑定事件addEventListener(事件名, 函数)动态绑定事件（比内联 onclick 更灵活）综合示例：点击按钮切换网页主题（DOM + 函数 + 样式）<!-- HTML -->
<button id="themeBtn">切换深色模式\</button>
<div class="content">这是网页内容\</div>
<!-- CSS -->
<style>
.light { background: white; color: #333; }
.dark { background: #333; color: white; }
</style>
<!-- JS -->
<script>
// 1. 获取元素
let btn = document.getElementById("themeBtn");
let content = document.querySelector(".content");
let isDark = false; // 标记当前是否为深色模式
// 2. 绑定点击事件（用addEventListener）
btn.addEventListener("click", function() {
if (isDark) {
// 切换浅色模式
document.body.className = "light";
btn.innerText = "切换深色模式";
isDark = false;
} else {
// 切换深色模式
document.body.className = "dark";
btn.innerText = "切换浅色模式";
isDark = true;
}
});
</script>举一反三：扩展成 “点击按钮显示 / 隐藏密码”<input type="password" id="pwd">
<button id="togglePwd">显示密码\</button>let pwd = document.getElementById("pwd");
let btn = document.getElementById("togglePwd");
let isShow = false;
btn.addEventListener("click", function() {
if (isShow) {
pwd.type = "password"; // 隐藏密码
btn.innerText = "显示密码";
isShow = false;
} else {
pwd.type = "text"; // 显示密码
btn.innerText = "隐藏密码";
isShow = true;
}
});四、实战案例：用 JS 写一个简单的待办清单结合前面的所有知识点，我们来写一个可 “添加”“删除” 待办的网页，巩固 JS 基础。完整代码（HTML+CSS+JS）<!DOCTYPE html>
<html>
<head>
<title>JS待办清单</title>
<style>
.todo-container { width: 400px; margin: 20px auto; }
#todoInput { width: 280px; padding: 8px; }
#addBtn { padding: 8px 16px; background: #008cba; color: white; border: none; cursor: pointer; }
.todo-item { display: flex; justify-content: space-between; margin: 8px 0; padding: 8px; border: 1px solid #eee; }
.deleteBtn { color: red; border: none; background: none; cursor: pointer; }
</style>
</head>
<body>
<div class="todo-container">
<h2>待办清单</h2>
<input type="text" id="todoInput" placeholder="请输入待办事项">
<button id="addBtn">添加</button>
<div id="todoList"></div>
</div>
<script>
// 1. 获取元素
let input = document.getElementById("todoInput");
let addBtn = document.getElementById("addBtn");
let todoList = document.getElementById("todoList");
// 2. 添加待办事项的函数
function addTodo() {
let text = input.value.trim(); // 去除空格
if (text === "") { // 验证非空
alert("请输入待办事项！");
return; // 为空则不执行后续代码
}
// 创建待办项（用innerHTML添加HTML）
todoList.innerHTML += `
<div class="todo-item">
<span>${text}</span>
<button class="deleteBtn">删除</button>
</div>
`;
// 清空输入框
input.value = "";
// 给新添加的删除按钮绑定事件（委托给父元素）
bindDeleteEvent();
}
// 3. 删除待办事项的函数
function bindDeleteEvent() {
// 获取所有删除按钮
let deleteBtns = document.querySelectorAll(".deleteBtn");
// 遍历按钮，绑定点击事件
for (let btn of deleteBtns) {
btn.addEventListener("click", function() {
// 删除当前按钮的父元素（todo-item）
this.parentElement.remove();
});
}
}
// 4. 绑定添加按钮的点击事件
addBtn.addEventListener("click", addTodo);
// 支持按Enter键添加
input.addEventListener("keydown", function(e) {
if (e.key === "Enter") {
addTodo();
}
});
</script>
</body>
</html>案例要点解析DOM 操作：用getElementById获取输入框和按钮，用innerHTML动态生成待办项；函数封装：把 “添加”“删除” 功能分别封装成addTodo()和bindDeleteEvent()；事件绑定：既用了addEventListener绑定点击 / 键盘事件，又处理了 “动态元素的事件委托”；表单验证：用trim()去除空格，判断输入是否为空。五、新手快速上手的 3 个建议“先抄后改”：先复制本文的示例代码，运行成功后再修改（如改文字、改样式、加条件），逐步理解逻辑；聚焦 “网页交互”：不要纠结于纯 JS 语法题，多写 “点击按钮、修改内容、表单验证” 等网页场景的代码；善用文档：遇到不懂的方法，查MDN 文档（最权威，有中文版本）。通过本文的学习，你已经掌握了 JS 和 HTML/CSS 的配合方式、核心语法、常用函数 / 方法，以及实战案例的开发思路。接下来就动手修改案例，比如给待办清单加 “完成状态切换”，或者写一个简单的计算器 —— 多练多改，JS 入门其实很简单！
-
网格布局两行代码css,完美适配任何屏幕
https://blog.hkmre.top/index.php/archives/9/
2025-08-06T20:10:00+08:00
用 CSS Grid 快速实现自适应卡片布局：两行代码搞定响应式设计在网页开发中，“一排展示多个卡片，且卡片能根据屏幕宽度自动调整数量与尺寸”是非常常见的需求。例如产品列表、图片画廊、内容卡片等场景，都需要这种灵活的自适应布局。传统实现方式往往依赖复杂的 Flexbox 嵌套或大量媒体查询（Media Query），代码冗余且维护成本高。而使用 CSS Grid 布局，仅需给父容器添加两行核心 CSS，即可完美满足需求。一、核心实现代码以下是完整代码示例，核心逻辑集中在父元素的 grid 相关属性中：/* 父容器：控制网格布局的核心 */
.grid-container {
display: grid; /* 1. 启用 Grid 布局 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 2. 定义列规则 */
gap: 16px; /* 可选：添加卡片间距，提升视觉效果 */
padding: 16px; /* 可选：添加容器内边距，避免卡片贴边 */
}
/* 子元素：卡片样式 */
.grid-item {
height: 200px; /* 固定卡片高度 */
background-color: rgb(141, 141, 255); /* 卡片背景色 */
border-radius: 10px; /* 圆角设计，优化视觉 */
display: flex; /* 可选：方便内部内容居中 */
align-items: center;
justify-content: center;
color: #fff; /* 可选：文字颜色 */
}二、核心代码拆解：grid-template-columns实现自适应的关键在于 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));，我们将其拆分为 3 个部分逐一理解：1. 基础属性：grid-template-columns作用：定义网格容器的“列数”和“每列宽度”，是 Grid 布局控制列的核心属性。示例：若写 grid-template-columns: 200px 200px 200px;，则表示容器固定显示 3 列，每列宽 200px（非自适应）。2. 重复规则：repeat(auto-fit, ...)repeat()：是 CSS Grid 提供的“重复函数”，用于简化“重复相同列/行规则”的写法。语法为 repeat(重复次数, 重复的规则)。auto-fit：是 repeat() 的第一个参数（重复次数），表示“自动计算列数”——根据容器宽度和列宽规则，能放下几列就放几列，空间不足时自动换行。屏幕宽 → 列数多（如桌面端显示 4 列）；屏幕窄 → 列数少（如移动端显示 1-2 列）。3. 列宽规则：minmax(200px, 1fr)minmax()：是“范围函数”，用于定义一个“最小值”和“最大值”，语法为 minmax(最小值, 最大值)。具体含义：最小值 200px：每列宽度最小不能小于 200px，当屏幕窄到无法容纳更多列时，触发自动换行（避免卡片被压缩变形）；最大值 1fr：1fr 是 Grid 中的“弹性单位”，代表“剩余空间的等分”。当屏幕宽度有剩余时，每列会自动拉伸，平分剩余空间，让整行卡片填满容器（避免出现空白）。三、最终效果总结将上述三部分结合，grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 的完整作用是：网格容器会自动生成列，每列宽度“最小 200px、最大平分剩余空间”；屏幕变宽时自动增加列数，屏幕变窄时自动减少列数并换行，无需写任何媒体查询，即可实现全场景自适应。这种写法不仅代码简洁，还能确保布局在任何屏幕尺寸下都保持美观，是实现卡片类自适应布局的“最优解”之一。