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>

本文JavaScript实现颜色查看器到此结束。吸取教训是健康的做法,这是个人成长过程中的必要环节。悔恨则是一种不健康的心理。这是白白浪费自我目前的精力。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
js实现图片查看器

详解elementui之el-image-viewer(图片查看器)

如何使用PHP Embed SAPI实现Opcodes查看器

JavaScript实现登录滑块验证

javaScript实现网页版的弹球游戏