page contents

WEB前端教程:颜色生成器

日常开发我们会用到一些配色工具,今天我们将自己开发一个颜色生成器。

attachments-2022-11-CuGqMtzz636336386f7c5.png课程目标

日常开发我们,我们会用到一些配色工具,今天我们将自己开发一个颜色生成器。
开发随机颜色生成程序,您需要学习 JavaScript 如何将数字转换为十六进制值,如何处理随机数,以及如何将字符串复制到剪贴板以备后用

您需要掌握的知识点:

  • Math.random()
  • 如何将数字转换为十六进制值
  • 剪贴板 (Clipboard) API

 阅读

 编码

参考示例图 (opens new window),编码实现一个随机颜色模板色卡生成程序。

attachments-2022-11-NYqVkkYJ63633669b6550.gif

用例需求

  • 点击 Generate Color Palette按钮或者点击键盘空格,随机生成 36 中颜色色卡
  • 每一个色卡对应颜色的十六进制颜色代码
  • 单击色卡自动将颜色代码复制到剪贴板,并且右下角给出相应复制颜色代码成功的提示框
    • 比如:点击颜色为#000000的色卡,提示Color #000000 copied to your clipboard
  • 最终完成效果下载链接:Color Generator Demo(opens new window)

要求

  • 不使用任何第三方的布局或样式库
  • 不使用任何第三方的 JavaScript 库
  • 代码风格优雅,代码结构合理,技术设计恰到好处
  • 示例图仅供参考,页面样式结构可以自行设计,实现功能需和上述用例描述一致

 提交

把你今天觉得做得最好的代码放在 Github 后进行提交。

 总结

依然把今天的学习用时,收获,问题进行记录。


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

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

attachments-2022-11-kQBudW0u636335bea31c6.jpg

0 条评论

请先 登录 后评论
小柒
小柒

1300 篇文章

作家榜 »

  1. 轩辕小不懂 2403 文章
  2. 小柒 1300 文章
  3. Pack 1135 文章
  4. Nen 576 文章
  5. 王昭君 209 文章
  6. 文双 71 文章
  7. 小威 64 文章
  8. Cara 36 文章