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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。
作者最新文章
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数?详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决?
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28
