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

(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门

前言:由于主包看见上一篇前端三件套入门点赞收藏挺多的,加之本身想继续学习入门前端,咱们就继续深入学习吧~~~^_^一边完成我们简易计算器的新功能一边学习新知识


一、新功能1描述:

  1. 支持键盘输入(数字/运算符/回车计算/ESC清空)---------学习事件监听

  2. 增加退格键功能-----------学习字符串操作

(1)代码实现:

第一部分,在script标签最前面添加这个函数(其他原有函数保持不变)

                // 按键处理函数:监听键盘事件,获取按下的键,根据不同按键执行对应操作.function handleKeyPress(e) {// e.key是用户按下的键const key = e.key;// 数字和运算符直接输入if(/[0-9/./+\-/*//]/.test(key)) {appendToDisplay(key);}// 回车键计算else if (key === 'Enter') {calculate();}// 退格键删除else if (key === 'Backspace') {const display = document.getElementById('display');display.value = display.value.slice(0, -1); // 字符串截取方法,即删除最后一个字符}// ESC键清空else if (key === 'Escape') {clearDispaly();}}

第二部分:在script末尾添加事件监听

// 使用DOMContentLoaded确保 DOM 加载完成后再绑定事件document.addEventListener('DOMContentLoaded', function() {// 监听整个文档的键盘按下事件(keydown事件),调用handleKeyPress处理document.addEventListener('keydown', handleKeyPress);})

 (2)代码解析:

1.e.key 的基本原理:
  1. 当用户按下键盘上的某个键时,浏览器会创建一个键盘事件对象KeyboardEvent),并将其作为参数传递给事件处理函数(如 handleKeyPress(e)
  2. 而在 JavaScript 的键盘事件中,e.key 是事件对象(e)的一个属性,它自动包含了用户按下的物理键所对应的字符或功能描述
  3. 这是浏览器原生提供的功能,无需额外配置。
  • e.key:返回一个字符串
    例如:

    • 按下数字键 5 → e.key 的值是 "5"
    • 按下字母键 A(无论大小写)→ e.key 的值是 "a" 或 "A"(取决于是否按住 Shift)
    • 按下功能键 Enter → e.key 的值是 "Enter"
    • 按下组合键 Ctrl + S → e.key 的值是 "s"Ctrl 状态需通过 e.ctrlKey 判断)

 说这么多,我们直接来直观地查看某个按键对应的 e.key 值吧~

document.addEventListener('keydown', function(e) {console.log(`按下的键: ${e.key}`);console.log(`按键代码: ${e.code}`);console.log(`是否按住 Ctrl: ${e.ctrlKey}`);console.log(`是否按住 Shift: ${e.shiftKey}`);
});

打开浏览器控制台(F12)- Console,按下任意键,即可实时看到事件对象的属性值啦~

2.事件监听设置

    使用DOMContentLoaded事件确保在 DOM 完全加载后再绑定事件

    如果直接在 script 标签中绑定事件(不使用 DOMContentLoaded),可能在 DOM 元素存在之前执行,导致错误

3.=== 比较符:

使用严格的 === 比较符不会执行类型强制转换,从而能够严格地评估两个对象之间的差别。

例子:

var zeroAsAString = "0";if (zeroAsAString == 0) {// 判断为true.....
}if (zeroAsAString === 0) {// 判断为false
}

 二、新功能2描述

  1. 新增一个显示带时间戳的计算历史面板,显示在页面的左边,用户可以看到自己计算的历史信息。即「左侧历史面板 + 居中计算器」--------进而学习Flexbox 布局

要完成这个需求我们先学习下Flexbox 的基础知识!

一、什么是 Flexbox?

Flexbox 是 CSS3 提供的一维布局模型,专门解决元素排列、对齐和分布空间的问题。就像整理书架:

  • Flex容器(书架):设置了 display: flex 的元素(使容器成为Flex容器,子元素自动成为Flex项目)

  • Flex项目(书本):容器的直接子元素

二、Flexbox核心属性:

分为两个方向,即主轴(水平)交叉轴(垂直)方向

2. 容器属性(控制整体布局(书架)

属性作用示例值
flex-direction主轴方向row/column
justify-content主轴对齐center/space-between
align-items交叉轴对齐center/stretch
flex-wrap是否换行nowrap/wrap
gap项目间距10px

3. 项目属性(控制单个元素(书本)

属性作用示例值
flex-grow放大比例1/0
flex-shrink缩小比例1/0
flex-basis初始尺寸300px/auto
align-self单独对齐center

 知道了基本的概念后,我们来设计下整体的页面布局:

三、布局设计考虑点:

  1. 先划分区域,确定父子关系

    • 识别页面中的独立功能区块----->得出:整个页面是容器,项目1是计算器,项目2是计算历史面板

  2. 控制弹性行为

    • 固定尺寸用 flex: 0 0 <宽度>

    • 自动填充用 flex: 1

四、修改 HTML 结构:

回到我们的代码原始结构,如果直接在body里面加入计算历史面板<div class="history-panel">...</div>

<div class="container"><div class="history-panel">...</div><!-- 计算器内容省略。。。 -->
</div>

 就会存在问题:历史面板和计算器是上下堆叠关系,无法实现左右并列!

 按照我们前面分析得出的解决方案:创建两个 Flex 项目

<div class="app-container">  <!-- Flex容器 --><div class="history-panel"></div>  <!-- Flex项目1(计算历史面板) --><div class="history-panel">省略...</div><div class="calculator-container"></div>  <!-- Flex项目2(计算器) --><div class="calculator">省略...</div>
</div>

五、CSS 关键代码详解 :

(1)外层 app-container 成为 Flex 容器:
.app-container {display: flex;       /* 启用Flex布局 */min-height: 90vh;    /* 确保高度足够 */gap: 20px;           /* 两个项目的间距 */flex-direction: row  /* 这个可以不写,因为默认是水平/左右放置两个项目 */
}

        🧩为什么用 min-height: 90vh

  • vh 单位表示视口高度的百分比

  • 确保布局即使内容很少时也能占满大部分屏幕

  • 避免历史面板高度塌陷

(2) Flex项目1(计算历史面板):
.history-panel {flex: 0 0 300px;     /* 不放大/不缩小/固定300px */overflow-y: auto;    /* 内容超出时滚动 */
}

flex 简写属性:flex: <flex-grow> <flex-shrink> <flex-basis>

flex: 0 0 300px

  • 不放大 (0)
  • 不缩小 (0)
  • 基础宽度 300px(类似width但优先级更高)
(3)Flex项目2(计算器):
.calculator-container {flex: 1;             /* 占据剩余所有空间 */display: flex;       /* 嵌套Flex实现居中 */justify-content: center;
}

flex: 1

  • 等价于 flex: 1 1 0%
  • 自动填满剩余空间

calculator-container 也是Flex容器

  • 外层Flex分配空间 (flex:1)
  • 内层Flex实现居中 (justify-content: center)

六、结合实操深入理解:

  1. 临时在.app-container 的CSS样式中添加 border: 1px solid red 查看容器范围:

可以看到如图,红框框起来的就是整个容器范围:

也可以打开F12检查-Elements,鼠标停在该处会显示标记区域:

 


三、总结:

本次学习到了 事件监听+字符串操作+Flexbox 布局逐步深入学习+实践练手。

期待我们的下一篇文章吧贝贝们,记得关注主包~

完整代码下一篇给出!(因为想把这个功能完整做完)

http://www.dtcms.com/a/264215.html

相关文章:

  • C++ 网络编程(13) asio多线程模型IOServicePool
  • Y-Combinator推导的Golang描述
  • 复现一个nanoGPT——model.py
  • postman入门篇
  • 用Fiddler中文版抓包工具掌控微服务架构中的接口调试:联合Postman与Charles的高效实践
  • 2.2.4 Linux 系统日志管理
  • (LeetCode 面试经典 150 题) 42. 接雨水 (单调栈)
  • 【C++】std::vector 全面指南
  • Excel 如何从一个大表里,根据姓名查找到对应的手机号?
  • 【1.5 漫画TiDB分布式数据库】
  • python+uniapp基于微信小程序的流浪动物救助领养系统nodejs+java
  • 蓝牙音频传输协议深度解析:A2DP、HFP、AVRCP 对比与面试核心考点
  • Langgraph 学习教程
  • 日事清驾驶舱模式上线:实时数据更新+项目管理+数据可视化,提升决策效率​
  • 5-TF·IDF关键词算法
  • 强化学习系列--从数值出发,解读 DPO 训练背后的偏好优化逻辑
  • Navicat Premium x TiDB 社区体验活动 | 赢 Navicat 正版授权+限量周边+TiDB 社区积分
  • 第8章路由协议,RIP、OSPF、BGP、IS-IS
  • RabbitMQ简单消息监听
  • 基于开源AI大模型AI智能名片S2B2C商城小程序的流量转化与价值沉淀研究
  • linux魔术字定位踩内存总结
  • 振荡电路Multisim电路仿真实验汇总——硬件工程师笔记
  • MySQL 常用命令大全
  • 0.96寸OLED显示屏 江协科技学习笔记(36个知识点)
  • swing音频输入
  • sqlmap学习ing(2.[第一章 web入门]SQL注入-2(报错,时间,布尔))
  • jQuery 安装使用教程
  • MySQL数据一键同步至ClickHouse数据库
  • 前端第二节(Vue)
  • 橙心同步助手2.0.1版本更新