浮出层

 课程目标

• 练习综合运用 HTML、CSS、JavaScript 实现局部功能
• 练习对于代码的抽象与封装

 编码

参考设计图 (opens new window)，实现一个浮出层的 UI 组件实现

• 浮出层的中心默认在屏幕正中
• 当浮出层显示时，屏幕滚动时，浮出层始终保持位置固定在屏幕正中，不随屏幕滚动而变化位置。或者禁止页面在有浮出层出现时滚动
• 当浮出层显示时，点击浮出层以外的部分，默认为关闭浮出层。可以实现一个半透明的遮罩来挡住浮出层外的部分
• 浮出层的样式、内容和逻辑尽量解耦
• 提供使用 JavaScript 控制浮出层展现和关闭的接口
• 浮出层的窗口大小可以是一个默认固定值，也可以是随内容变化而自适应变化，也可以是通过接口参数进行调整，自行根据自己能力进行选择
• 有能力的同学可以实现浮出层的拖拽移动浮出窗口位置以及拖拽边缘来放大缩小浮出窗口的功能

注意事项

• 请注意代码风格的整齐、优雅
• 代码中含有必要的注释
• 可以合理选择使用其它第三方类库，但不建议

 排序表格

 课程目标

• 练习综合运用 HTML、CSS、JavaScript 实现局部功能
• 练习对于代码的抽象与封装

 编码

参考设计图 (opens new window)，实现一个支持列排序的表格组件

• 提供生成表格的接口，表格中的数据，表格样式尽量低耦合
• 可以配置对哪些列支持排序功能，并在表头进行排序按钮的显示，图中的样式为示意参考，可自行设定样式及交互方式
• 提供点击排序按钮后的响应接口，并提供默认的排序方法，当提供的接口没有具体实现时，按默认的排序方法进行排序操作，并更新表格中的数据显示

注意事项

• 请注意代码风格的整齐、优雅
• 代码中含有必要的注释
• 可以合理选择使用其它第三方类库，但不建议

 冻结行列表格

 课程目标

• 练习综合运用 HTML、CSS、JavaScript 实现局部功能
• 练习对于代码的抽象与封装

 编码

参考设计图 (opens new window)，实现一个支持首行冻结的表格组件

• 当页面向下滚动，使得第一行已经在屏幕外时，则第一行则变成始终固定在屏幕最上方

• 当整个表格都滚动出屏幕时，固定的第一行也消失 注意事项

• 请注意代码风格的整齐、优雅

• 代码中含有必要的注释

• 可以合理选择使用其它第三方类库，但不建议

  日历组件（一）

 课程目标

• 练习综合运用 HTML、CSS、JavaScript 实现局部功能
• 练习对于代码的抽象与封装

  编码

如示例图 (opens new window)中所示的各种日历组件，参考并实现一个日历选择组件

• 组件默认一直呈显示状态
• 通过某种方式选择年、月，选择了年月后，日期列表做相应切换
• 通过单击某个具体的日期进行日期选择
• 组件初始化时，可配置可选日期的上下限。可选日期和不可选日期需要有样式上的区别
• 提供设定日期的接口，指定具体日期，日历面板相应日期选中
• 提供获取日期的接口，获取日历面板中当前选中的日期，返回一个日期对象（或其他形式，自定）

注意事项

• 示例图仅为参考，样式及交互方式不需要完全实现一致
• 可以使用 JQuery 等类库，不可直接使用现成的日历组件
• 请注意代码风格的整齐、优雅
• 代码中含有必要的注释

 日历组件（二）

  课程目标

• 练习综合运用 HTML、CSS、JavaScript 实现局部功能
• 练习对于代码的抽象与封装

 编码

• 日期选择面板默认隐藏，会显示一个日期显示框和一个按钮，点击这两个部分，会浮出日历面板。再点击则隐藏。
• 点击选择具体日期后，面板隐藏，日期显示框中显示选取的日期
• 增加一个接口，用于当用户选择日期后的回调处理

注意事项

• 示例图仅为参考，样式及交互方式不需要完全实现一致
• 可以使用 JQuery 等类库，不可直接使用现成的日历组件
• 请注意代码风格的整齐、优雅
• 代码中含有必要的注释

 日历组件（三）

 课程目标

• 练习综合运用 HTML、CSS、JavaScript 实现局部功能
• 练习对于代码的抽象与封装

  编码

基于上一任务，进行如示例图 (opens new window)中的升级

• 增加一个参数及相应接口方法，来决定这个日历组件是选择具体某天日期，还是选择一个时间段
• 当设置为选择时间段时，需要在日历面板上点击两个日期来完成一次选择，两个日期中，较早的为起始时间，较晚的为结束时间，选择的时间段用特殊样式标示
• 增加参数及响应接口方法，允许设置时间段选择的最小或最大跨度，并提供当不满足跨度设置时的默认处理及回调函数接口
• 在弹出的日期段选择面板中增加确认和取消按钮

注意事项

• 示例图仅为参考，样式及交互方式不需要完全实现一致
• 可以使用 JQuery 等类库，不可直接使用现成的日历组件
• 请注意代码风格的整齐、优雅
• 代码中含有必要的注释

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等