WEB前端教程：颜色生成器
日常开发我们会用到一些配色工具，今天我们将自己开发一个颜色生成器。
课程目标
日常开发我们，我们会用到一些配色工具，今天我们将自己开发一个颜色生成器。
开发随机颜色生成程序，您需要学习 JavaScript 如何将数字转换为十六进制值，如何处理随机数，以及如何将字符串复制到剪贴板以备后用
您需要掌握的知识点：
- Math.random()
- 如何将数字转换为十六进制值
- 剪贴板 （Clipboard） API
阅读
- How To Generate a Random Color in JavaScript(opens new window)
- Math.random() - JavaScript | MDN(opens new window)
- Interact with the clipboard | MDN(opens new window)
- 剪贴板操作 Clipboard API 教程 | 阮一峰(opens new window)
- CSS（层叠样式表） | MDN(opens new window)
- HTML（超文本标记语言） | MDN(opens new window)
编码
参考示例图 (opens new window),编码实现一个随机颜色模板色卡生成程序。
用例需求
- 点击 Generate Color Palette按钮或者点击键盘空格，随机生成 36 中颜色色卡
- 每一个色卡对应颜色的十六进制颜色代码
- 单击色卡自动将颜色代码复制到剪贴板,并且右下角给出相应复制颜色代码成功的提示框
- 比如：点击颜色为#000000的色卡，提示Color #000000 copied to your clipboard
- 最终完成效果下载链接：Color Generator Demo(opens new window)
要求
- 不使用任何第三方的布局或样式库
- 不使用任何第三方的 JavaScript 库
- 代码风格优雅，代码结构合理，技术设计恰到好处
- 示例图仅供参考，页面样式结构可以自行设计，实现功能需和上述用例描述一致
提交
把你今天觉得做得最好的代码放在 Github 后进行提交。
总结
依然把今天的学习用时，收获，问题进行记录。
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等
- 发表于 2022-11-03 11:32
- 阅读 ( 1144 )
- 分类：WEB前端开发
