纯HTML+JS实现借阅记录查询：数据以JS数组组织，按studentId/title/isbn预处理后模糊匹配，实时渲染表格行并用CSS类标识未归还状态，支持CSV导出与无结果提示。
用纯 HTML + JavaScript 实现借阅记录查询，不依赖后端也能跑起来
静态页面能查借阅记录，关键不是“有没有数据库”，而是数据怎么组织、怎么过滤、怎么渲染。直接把图书和借阅数据写成 JS 对象，用 filter() 和 map() 做前端筛选，比硬套表单提交+PHP 更快验证逻辑。
- 借阅记录存成数组，每项含
bookId、studentId、borrowDate、returnDate（空值表示未还） - 图书信息另建一个数组，用
bookId关联，避免重复字段 - 查询输入框绑定
input事件，实时触发renderList()，别等点按钮 - 用
innerHTML拼接表格行比反复appendChild更轻量，但注意 XSS：所有用户输入内容必须用textContent赋值，或提前escapeHtml()处理
搜索框支持按学号、书名、ISBN 三路模糊匹配
一个输入框要同时查三个字段，不能只用 includes() 硬怼字符串——中文书名带空格、ISBN 有短横、学号可能补零，得统一预处理。
- 把
studentId、title、isbn都转成小写，再去除首尾空格，和搜索关键词的小写版比对 - 关键词本身也做
.trim().toLowerCase()，否则输 “ java ” 会查不到 “Java编程思想” - 不要用正则
test()做全字段匹配，性能差；改用indexOf() !== -1足够，100 条记录内无感知 - 示例：搜索 “web” 应命中《Web开发实战》《HTTP权威指南》《Node.js 入门》，但不中《TCP/IP详解》
“未归还”状态用 CSS 类动态控制，别写死文字
借阅记录里 returnDate 是空字符串或 null，就代表没还。这个判断必须在 JS 渲染时做，而不是后台传个 “status: ‘borrowed’” 字符串过来。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 渲染每一行时检查
record.returnDate == null || record.returnDate === '' - 满足条件就给
<tr>加class="unreturned"，CSS 里写.unreturned { background-color: #fff8e1; } - 别在 HTML 里写 “未归还”，更别用不同颜色字体硬编码——状态变、样式就得改，耦合太紧
- 如果后续加“逾期”逻辑，只要多一个
isOverdue()函数和对应 class，HTML 和 CSS 几乎不用动
导出当前查询结果为 CSV，一行代码调起下载
用户想保存结果，不必连服务器，浏览器原生支持 Blob + URL.createObjectURL() 触发下载。
立即学习“前端免费学习笔记（深入）”；
- 把当前显示的
filteredRecords数组转成 CSV 字符串：用map()拼每行，字段用"包裹，含逗号或换行的字段要双引号转义 - 生成 Blob：
new Blob([csvString], { type: 'text/csv;charset=utf-8;' }) - 创建临时链接：
const url = URL.createObjectURL(blob)，然后a.href = url+a.click() - 注意兼容性：
URL.createObjectURL在 IE10+ 支持，但 IE 不支持Blob构造函数，真要兼容得降级用data:text/csv,URI 方案
