用JavaScript怎样写一个颜色查看器？
发布时间：2022-03-02 13:03:48 所属栏目：语言 来源：互联网
导读：这篇文章给大家分享的是用JavaScript实现颜色查看器的内容，实现效果如下，通过颜色查看器我们可以预览到这个颜色是不是我们所需的颜色，小编觉得挺实用的，因此分享给大家做个参考，接下来一起跟随小编看看吧。 实现效果 方框中初始为白色 输入框中输入颜色
|
这篇文章给大家分享的是用JavaScript实现颜色查看器的内容，实现效果如下，通过颜色查看器我们可以预览到这个颜色是不是我们所需的颜色，小编觉得挺实用的，因此分享给大家做个参考，接下来一起跟随小编看看吧。 实现效果 方框中初始为白色 输入框中输入颜色代码，点击查看颜色，在上方即可出现对应颜色 点击复原，复原到初始的白色，同时清空输入框的内容 实现代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>颜色查看器</title> <style> #color { width: 150px; height: 150px; background-color: #fff; border: 1px solid #000; } </style> </head> <body> <div id="color"></div> <input id="inp" type="text" placeholder="请输入颜色代码..." /> <button id="trans">查看颜色</button> <button id="rst">复原</button> </body> <script> let trans = document.getElementById('trans'); let color = document.getElementById('color'); let inp = document.getElementById('inp'); let rst = document.getElementById('rst'); trans.addEventListener('click', () => { color.style.backgroundColor = inp.value; }); rst.addEventListener('click', () => { color.style.backgroundColor = '#fff'; inp.value = ''; }); </script> </html> （编辑：衡水站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
