怎么新建MySQL数据库
发布时间：2021-08-30
作者：admin
阅读：1499
阅读：1499
这篇文章给大家分享的是用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实现颜色查看器的代码就分享到这，需要的朋友可以借鉴参考，希望对大家学习JavaScript有帮助，想要了解更多大家可以关注群英网络其它相关文章。
文本转载自脚本之家
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理