本文介绍了一个使用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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。