温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JavaScript实现颜色查看器的方法

发布时间:2021-04-13 10:46:09 来源:亿速云 阅读:184 作者:小新 栏目:开发技术

小编给大家分享一下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实现颜色查看器的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js
AI