为了账号安全,请及时绑定邮箱和手机立即绑定

DatePicker组件开发

学习人数
难度级别 中级
课程时长 1小时30分
综合评分 9.9
48人评价 查看评价
10.0 内容实用
9.9 简洁易懂
9.9 逻辑清晰
简介:通过原生HTML/CSS/JavaScript完成一个日期选择器(datepicker)组件的开发。主要包括datepicker静态结构的编写、日历数据的计划获取、组件的渲染以及组件事件的处理。 课程基本涵盖一个完整的前端组件的基本要素,掌握后对其它组件的开发有借鉴意义。

第1章 课程介绍
对datepicker组件进行介绍

  1. 1-1 课程介绍 (02:13)

第2章 datepicker静态UI的编写
datepicker静态UI的编写,包括HTML结构编写和CSS样式编写

  1. 2-1 静态结构 (09:30)
  2. 2-2 样式编写 (10:14)

第3章 datepicker日历数据的获取
datepicker日历数据的获取:介绍Date相关API,利用Date API获取日历数据

  1. 3-1 前置知识 (06:55)
  2. 3-2 获取日历数据 (14:13)

第4章 数据渲染
结合静态UI结构和动态日历数据,将日历数据渲染出来

  1. 4-1 数据渲染 (15:56)

第5章 事件绑定
处理datepicker的事件绑定,完成整个组件功能

  1. 5-1 展开收起 (07:00)
  2. 5-2 月份切换 (07:41)
  3. 5-3 点击选择 (06:43)

第6章 课程总结
对整门课程进行总结

  1. 6-1 总结 (01:59)

讲师提示

课程须知
需要有HTML/CSS/JavaScript基础
老师告诉你能学到什么?
1、使用HTML和CSS编写组件的静态UI 2、使用原生javascript完成日历数据的获取 3、使用原生javascript实现静态UI和动态数据的结合,完成日历数据的渲染 4、事件绑定处理 5、前端组件的基本构成和编写模式
意见反馈 常见问题 APP下载
官方微信
hv128