MyJS - JavaScript 学习项目集

项目简介

myjs 是一个个人JavaScript学习项目集合，包含了多个前端开发的基础练习案例。这个项目展示了从基础到进阶的JavaScript编程技能，涵盖了DOM操作、事件处理、动画效果等多个方面。

项目结构

项目中包含了以下类型的练习文件：

基础DOM操作

• DOM内容修改 - 学习如何修改页面元素内容
• 操作元素属性 - 掌握元素属性的获取和设置
• 通过classlist修改 - 使用classList操作CSS类
• 通过style修改 - 直接修改元素样式
• 通过类名修改 - 通过className操作样式

事件处理

• 事件监听 - 基础事件监听机制
• 事件捕获，冒泡 - 深入理解事件传播机制
• 解绑事件 - 学习如何移除事件监听器
• 阻止默认行为 - 防止默认事件行为
• 委托事件 - 事件委托机制的应用

实用案例

• 倒计时 - 实现倒计时功能（包含下班倒计时）
• Tab栏切换 - 实现选项卡切换效果
• 轮播图 - 多种版本的图片轮播实现
  • 基础刷新版
  • 定时切换版
  • 完整功能版
• 全选-反选 - 复选框的全选和反选功能
• 随机干饭 - 随机选择餐厅的小工具
• 随机抽奖 - 抽奖程序实现

表单交互

• 表单处理 - 表单元素的操作和验证
• 小米搜索框 - 仿小米搜索框效果
• 用户注册倒计时 - 注册页面倒计时功能
• 评论回车发布 - 回车键发布评论功能

动画效果

• 点击关广告 - 广告关闭动画
• 仿新浪固定头部 - 滚动时固定导航栏
• 刷新换背景 - 随机更换背景色
• 电梯导航 - 页面内导航定位

数据管理

• 学生信息表 - 学生信息管理系统
  • 基础版本
  • 本地存储版本
• ATM模拟 - 简单的ATM机功能模拟

移动端适配

• M端事件 - 移动端触摸事件处理

技术特点

• 纯原生JavaScript - 不依赖第三方库，使用原生JS实现
• HTML5 + CSS3 - 使用现代Web标准
• 响应式设计 - 适配不同设备屏幕
• 模块化思维 - 每个案例都是独立的模块

学习价值

这个项目非常适合：

• JavaScript初学者学习基础语法和DOM操作
• 前端开发者复习和巩固基础知识
• 寻找常见交互效果的实现参考
• 理解事件处理和动画原理

在线演示

项目提供了GitHub Pages在线演示： 👉 https://wanzai40.github.io/myjs/inall.case/inall.html

文件命名说明

文件采用中文命名，直观反映每个案例的功能：

• 06-倒计时.html - 第6个练习：倒计时功能
• 10-小米搜索框.html - 第10个练习：仿小米搜索框
• 轮播图,完整版.html - 轮播图的完整实现版本

使用建议

1. 按照文件编号顺序学习，从基础到进阶
2. 每个案例都是独立的，可以直接在浏览器中打开运行
3. 建议配合浏览器开发者工具查看效果和学习调试
4. 可以尝试修改代码，添加自己的创意和功能

这个项目展现了扎实的前端基础和对JavaScript核心概念的深入理解，是一个很好的学习和参考资源。