百度前端技术学园

# 综合大作业基础版(三)

# 课程目标

  • 在上一任务基础上继续 JavaScript 的实践，封装日期组件

# 阅读

# 任务

第三步：按照 ife_2021_st_03.jpg (opens new window) 所示，实现一个入学年份的可视选择，需求包括：

  1. 入学年份输入框改为一个非输入框的区域（我们暂时称之为选择结果区域），默认显示某一个年份，默认样式同上一步

  2. 当鼠标移动进入“选择结果区域”时，在年份下方弹出一个如图的面板，供具体年份选择，并且弹出面板中和选择结果区域值一样的部分加强显示；同时，选择结果区域样式发生改变（变为图中所示）。

  3. 年份可选择的范围，和界面是解耦的，相关配置，可以参考的实现方式包括但不限制：

    3.1 通过年份输入的 DOM 中的自定义属性
    3.2 通过在 JavaScript 代码设置变/常量进行配置

  4. 点击弹出面板中的某个年份，完成选择，弹出面板消失

  5. 鼠标移动出 “选择结果区域”+“弹出面板” 时，弹出面板消失，选择结果区域样式恢复到默认态

  6. 请注意类似圆角、阴影等细节样式，按照设计图中实现

  7. 【可选】酌情按体验实现面板出现和消失的动效

← 综合大作业基础版(四) →