百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

UI组件之色彩选择器

进阶

人数407人在学习该课程,有65人已经完成该课程

时间平均用时4.5

关键词WebUI组件

课程概述

作业提交截止时间:04-24

任务描述

欢迎加入商业平台学院QQ群38234781,获得与导师一对一的沟通机会

  • 如下示例图中所示,参考并实现一个色彩选择器:

    色彩选择器

  • 组件默认一直呈显示状态

  • 可以通过点击左侧色彩区域选择色彩,在右侧的输入框中会显示对应的色值,包括RGB和HSL值
  • 可以通过调节右侧输入框的各数值,来查看对应的颜色
  • 可以通过在中间的色带上点击来确定大致的颜色区域
  • 提供设定颜色值的接口,指定具体颜色,左侧色区和右侧输入框显示对应数值
  • 提供获取颜色值的接口,可获取色彩选择器选中的颜色值,可返回CSS color、RGB、HSL三种格式的色值

任务注意事项

  • 示例图仅为参考,样式及交互方式不需要完全实现一致
  • 可以合理使用第三方框架、类库,但不可直接使用现成的色彩选择组件
  • 请注意代码风格的整齐、优雅
  • 代码中含有必要的注释
学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记
标题发布时间浏览量点赞量
色彩选择器之制作思路2017-02-26 21:20249612
我的colorPicker制作思路2017-04-07 19:1823664
点击查看更多课程优秀笔记