用JavaScript怎样写一个颜色查看器？-群英

上一篇：用react怎样实现循环数据和循环列表？下一篇：什么是vue的diff算法？有何作用？

这篇文章给大家分享的是用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>

关于js实现颜色查看器的代码就分享到这，需要的朋友可以借鉴参考，希望对大家学习JavaScript有帮助，想要了解更多大家可以关注群英网络其它相关文章。

文本转载自脚本之家