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>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• JS实现简单面向对象的颜色选择器实例
• js实现的简单radio背景颜色选择器代码
• javascript实现根据3原色制作颜色选择器的方法
• js实现可得到不同颜色值的颜色选择器实例
• 鼠标选择动态改变网页背景颜色的JS代码
• JS小功能（button选择颜色)简单实例
• JavaScript获取系统自带的颜色选择器功能（图）
• 5款Javascript颜色选择器
• js 颜色选择器（兼容firefox）
• js颜色选择器代码[firefox不支持]

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！