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 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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
1. ASP中实现字符部位类似.NET里String对象的PadLeft和PadRight函数2. PHP字符串前后字符或空格删除方法介绍3. ASP删除img标签的style属性只保留src的正则函数4. 匹配模式 - XSL教程 - 45. Javaweb工程运行报错HTTP Status 404解决办法6. PHP循环与分支知识点梳理7. .NET使用YARP通过编码方式配置域名转发实现反向代理8. msxml3.dll 错误 800c0019 系统错误:-2146697191解决方法9. 详解PHP laravel中的加密与解密函数10. 浅谈SpringMVC jsp前台获取参数的方式 EL表达式
网公网安备