JavaScript实现颜色查看器

作者:纸飞机时间:2026-10-24 09:30:56浏览:180

本文介绍了一个使用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>

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

作者最新文章