JavaScript实现颜色查看器
更新时间：2021年04月13日 08:34:00 作者：火星飞鸟
这篇文章主要为大家详细介绍了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绘制几何图形教程，本文主要是教大家绘制圆、弧、扇形,需要的朋友可以参考下2015-01-01
本文主要介绍了json数据处理及数据绑定的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了详解es6超好用的语法糖Decorator，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家介绍了Three.js创建文字初体验，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
我们都知道车牌是有一定规律的，本文实现了微信小程序中实现车牌输入功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要介绍了js根据后缀判断文件文件类型的代码，原来是获取文件的扩展名然后再判断属于什么类型，对于图片多个后缀的判断的实现也不是不错的思路，大家可以参考一下2020-05-05
这篇文章主要介绍了ECMAScript的 6 种简单数据类型，ECMAScript的数据类型很灵活，一种数据类型可以当作多种数据类型来使用，具体使用详情文章详细介绍需要的小伙伴可以参考一下2022-06-06
这篇文章主要介绍了JS中如何比较两个Json对象是否相等实例代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
这篇文章主要介绍了JavaScript随机生成颜色的方法的相关资料,非常不错，代码简单易懂，具有参考借鉴价值，需要的朋友可以参考下2016-10-10
下面小编就为大家带来一篇一个字符串中出现次数最多的字符 统计这个次数【实现代码】。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-04-04
最新评论