本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员的世界。

JavaScript实现颜色查看器的更多相关文章

  1. JS removeAttribute()方法实现删除元素的某个属性

    在 JavaScript 中,使用元素的 removeAttribute() 方法可以删除指定的属性。用法如下:removeAttribute(name)参数 name 表示元素的属性名。示例1下面示例演示了如何动态设置表格的边框。window.onload = function () { //绑定......

  2. 在JavaScript中查找字符串中最长单词的三种方法(推荐)

    本文基于Free Code Camp基本算法脚本“查找字符串中最长的单词”。在此算法中,我们要查看每个单词并计算每个单词中有多少个字母。然后,比较计数以确定哪个单词的字符最多,并返回最长单词的长度。在本文中,我将解释三种方法。首先使用FOR循环,其次使用sort()方法,第三次使用reduce()方......

  3. JavaScript中的Proxy对象

    Js中Proxy对象Proxy对象用于定义基本操作的自定义行为,例如属性查找、赋值、枚举、函数调用等。语法const proxy = new Proxy(target, handler);target: 要使用Proxy包装的目标对象,可以是任何类型的对象,包括原生数组,函数,甚至另一个代理。han......

  4. JS中循环遍历数组的四种方式总结

    本文比较并总结遍历数组的四种方式:for 循环:for (let index=0; index < someArray.length; index++) { const elem = someArray[index]; // ··· } for-in 循环:for......

  5. JS数组处理汇总

    join()方法:将数组中所有元素通过指定分隔符连接成一个字符串举例:myArr.join('-') // 用'-'符号拼接concat()方法:将两个数组或多个数组合并成一个数组举例:myArr.concat(arr1, arr2, ..., arrN)注意:该方法不会改变现有的数组,所以可以和空......

  6. js简单粗暴的发布订阅示例代码

    什么是发布/订阅?我打个比方,你去某个门店买衣服,你和门店店长相互并不认识,门店店长只管卖他的衣服,并不关心是谁来买,而你也只管买你想要的衣服,并不关心是哪个门店在卖,这时,门店和你就组成了一个发布/订阅的关系。当门店挂出衣服款式,你去找你想要的衣服,如果找到了,那就买下来,如果没找到,那就离开这家......

  7. jQuery中toggle与slideToggle以及fadeToggle的显示、隐藏方法的比较

    1、区别 ①动画效果的比较: toggle:直接显示、隐藏,如果有【时间参数】且【匹配的元素有宽度属性】,则动态效果为左上角-右下角拉卷效果,透明度0-1之间的变化;若有时间参数但是【匹配的元素没有宽度属性】,则动态效果为上下拉卷的效果,且没有透明度的变化。 slideToggle:切换上下拉卷滚效......

  8. js中this指向的问题与联系深入探究

    前言JavaScript 中最大的一个安全问题,也是最令人困惑的一个问题,就是在某些情况下this的值是如何确定的。有js基础的同学面对这个问题基本可以想到:this的指向和函数调用的方式相关。这当然是正确的,然而,这几种方式有什么联系吗?这是我接下来要说明的问题。this从哪里来this 是js的......

  9. 详解JavaScript中的链式调用

    链模式链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧。描述链式调用在JavaScript语言中很常见,如jQuery、Promise等,都是使用的链式调用,当我们在调用同一对象多次其属性或方法的时候,我们需要多次书写对象进行.或()操作,链式......

  10. JavaScript——深入了解this

    前言我曾以为func()其实就是window.func()function func(){console.log('this : ' + this);}func();//this : [object Window]window.func();//this : [object Window] 直到'u......

随机推荐

  1. R语言 实现将factor转换成numeric方法

    方法1:such as : x <- factor(c(3,4,5,1))as.numeric(x)[1]2 3 4 1最好是这样:as.numeric(levels(x)[x])[1] 3 4 5 1方法2:as.numeric(as.character()) 该方法最好!方法3:read.......

  2. 爬虫-urllib模块的使用

    urllib是Python中请求url连接的官方标准库,在Python3中将Python2中的urllib和urllib2整合成了urllib。urllib中一共有四个模块,分别如下:request:主要负责构造和发起网络请求,定义了适用于在各种复杂情况下打开 URL (主要为 HTTP) 的函数和......

  3. vue+element+oss实现前端分片上传和断点续传

    纯前端实现: 切片上传 断点续传 。断点续传需要在切上上传的基础上实现前端之前上传OSS,无需后端提供接口。先上完整代码,直接复制,将new OSS里的参数修改成自己公司OSS相关信息后可用,如遇问题,请继续往下看。oss官方文档https://help.aliyun.com/document_de......

  4. php swoft框架实例用法

    在框架选择上,不少人会觉得swoft才是最强PHP框架,尤其是在常驻内存模式的应用级高性能框架,性能是这一堆页面级框架遥不可及的,但是使用上稍微有点欠缺,内容稍微复杂,不如easyswoole好上手,但是性能上是绝对的好用,大家如果在编写项目时候,强烈要求使用性能,就可以了解下这个框架。使用场景微服......

  5. SpringBoot + 微信公众号JSAPI支付功能的实现

    1、pom.xml依赖配置<!-- 微信支付 --><dependency><groupId>com.egzosn</groupId><artifactId>pay-java-wx</artifactId><version......

  6. R语言 Factor类型的变量使用说明

    factor类型的创建1. factor( )> credit_rating <- c("BB", "AAA", "AA", "CCC", "AA", "AAA", &......

  7. java如何生成分享海报工具类

    # 前言 例如:生成分享海报,比如注册扫二维码登录.分享商品海报等!本博文是基于springboot工程得!一、使用步骤1.导入pom依赖和上传图片到工程代码如下(示例):在自己得通用工具类模块中导入坐标!(这需要根据自己得工程来)<!--谷歌图片压缩--><dependency......

  8. Python学习(5)(while循环语句、循环嵌套、break/continue、赋值运算符、转义字符等 )

    Python学习(5)一、python的while 循环语句二、python的赋值运算符三、python的while 循环语句 示例四、python的 break 和 continue五、python的while 嵌套1、用嵌套打印小星星2、python 九九乘法表六、python的print 函数......

  9. Linux 安装mysql总结

    第一步:mysql安装包准备mysql官网下载地址:https://downloads.mysql.com/ 第二步:将mysql安装包上传到服务器这里上传的工具很多,就不再赘述(我用的winscp) 第三步:解压tar -zxvf mysql-5.7.30-linux-glibc2.12-x86_......

  10. .NET的并发编程(TPL编程)是什么?

    写在前面优秀软件的一个关键特征就是具有并发性。过去的几十年,我们可以进行并发编程,但是难度很大。以前,并发性软件的编写、调试和维护都很难,这导致很多开发人员为图省事放弃了并发编程。新版 .NET 中的程序库和语言特征,已经让并发编程变得简单多了。随着 Visual Studio 2012 的发布,微......