当前位置： 首页 > news >正文

蓝桥杯Web前端练习-----渐变色背景生成器

news 2026/2/9 6:42:36

介绍
相信做过前端开发的小伙伴们对渐变色在 UI 设计中的流行度一定不陌生，网页上也时常可以看到各类复杂的渐变色生成工具。使用原生的 CSS 变量加一些 JS 函数就能做出一个简单的渐变色背景生成器。

现在渐变色生成器只完成了颜色选取的功能，需要大家帮忙把取色器中的两个色值通过 JS 函数更新给 CSS 变量，从而实现渐变色预览功能。

准备
本题已经内置了初始代码，打开实验环境，目录结构如下：

├── index.html
├── index.js
└── styles.css

其中：

  • styles.css 是页面样式文件。
  • index.html 是页面布局结构。
  • index.js 是页面功能实现的 js 文件。
    选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。

接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：
在这里插入图片描述
目标
目前的色块和渐变色背景为初始值且不会自动更新。

请大家根据 index.js 文件中的提示和要求添加所需的 JavaScript 代码，让色块的输入值对应到渐变色背景中，并且在更改色块颜色之后，渐变色背景也会随之改变

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="styles.css" /><title>Gradient Generator</title></head><body><div class="controls"><input id="color1" type="color" name="color1" value="#00dbde" /><input id="color2" type="color" name="color2" value="#fc00ff" /></div><div class="gradient"></div><script src="index.js"></script></body>
</html>

css


/* 注意这里定义的 CSS 变量，它们会用于生成渐变色背景 */
:root {--color1: #00dbde;--color2: #fc00ff;
}body {width: 100vw;height: 100vh;overflow: hidden;display: flex;flex-direction: column;justify-content: center;align-items: center;background: #222;
}.controls {width: 500px;height: 100px;display: flex;justify-content: space-between;
}input[type="color"] {-webkit-appearance: none;border: none;width: 60px;height: 60px;border-radius: 5px;
}input[type="color"]::-webkit-color-swatch-wrapper {padding: 0;margin: 0;
}input[type="color"]::-webkit-color-swatch {border: none;border-radius: 5px;transform: scale(1.1);
}.gradient {width: 500px;height: 500px;border-radius: 5px;background: linear-gradient(45deg, var(--color1), var(--color2));
}

js

const inputs = document.querySelectorAll(".controls input");/*** 上面已经选取了两个取色器* 请添加相应的 JS 事件处理函数并绑定到合适的事件监听器上（提示：change 事件）* 这样我们就可以用取色器选取颜色来生成下方的渐变色背景啦*  */

知识点
setProperty() 方法：用于设置一个新的 CSS 属性，同时也可以修改 CSS 声明块中已存在的属性。
object.setProperty(propertyname, value, priority)

  1. propertyname 必需。一个字符串，表示创建或修改的属性。
  2. value 可选，新的属性值。
  3. priority 可选。字符串，规定是否需要设置属性的优先级 important。
    • 可以是下面三个值:
      • “important”
      • undefined
      • “”

答案

const inputs = document.querySelectorAll(".controls input");/*** 上面已经选取了两个取色器* 请添加相应的 JS 事件处理函数并绑定到合适的事件监听器上（提示：change 事件）* 这样我们就可以用取色器选取颜色来生成下方的渐变色背景啦*  */const  root = document.querySelector(":root");for(let i = 0; i < inputs.length; i++){inputs[i].addEventListener('change',function(){root.style.setProperty("--color" + (i + 1), this.value);})}

相关文章：

蓝桥杯Web前端练习-----渐变色背景生成器

介绍 相信做过前端开发的小伙伴们对渐变色在 UI 设计中的流行度一定不陌生&#xff0c;网页上也时常可以看到各类复杂的渐变色生成工具。使用原生的 CSS 变量加一些 JS 函数就能做出一个简单的渐变色背景生成器。 现在渐变色生成器只完成了颜色选取的功能&#xff0c;需要大家…...

编程日记 2023/3/23 9:29:56

Python中的微型巨人-Flask

文章目录前言主要内容优点及特性主要使用创建实例定义路由获取请求定制响应渲染Jinja2模板重定向和反向解析抛出HTTP异常总结更多宝藏前言 &#x1f60e;&#x1f973;&#x1f60e;&#x1f920;&#x1f62e;&#x1f916;&#x1f648;&#x1f4ad;&#x1f373;&#x1f…...

编程日记 2023/4/13 4:49:12

密码学中的承诺

Commitment 概述 密码学承诺是一个涉及两方的二阶段交互协议&#xff0c;双方分别为承诺方和接收方。简述来说&#xff0c;它的功能涵盖不可更改性和确定性。 承诺方发送的消息密文&#xff0c;一旦发出就意味着不会再更改&#xff0c;而接收方收到这个消息可以进行验证结果。…...

编程日记 2023/3/23 9:19:52

redis入门实战一、五种数据结构的基本操作（二）

redis入门实战一、五种数据结构的基本操作【二】 一、String1）、set2）、getset3）、msetnx 给多个元素赋值，原子操作4）、字符串 追加 & 取部分数据5）、数值可以做加减，指定增量大小6）、获取长度7）、 bitmap①、setbit②、bitop 二进制与或运算（效率高）③、bitcou…...

编程日记 2023/3/23 9:14:50

day13 模块和异常捕获总结

day13 模块和异常捕获 一、生成器 &#xff08;一&#xff09;、什么是生成器 1&#xff09;容器&#xff08;是一种可以创建多个数据的容器&#xff09;&#xff0c;生成器中保存的是创建数据的方法&#xff0c;而不是数据本身。2&#xff09;特点&#xff1a; a. 打印生成…...

编程日记 2023/4/12 16:30:43

【Linux】进程优先级 环境变量

进程优先级 环境变量 一、进程优先级1、基本概念2、查看以及修改系统进程的优先级3、一些其他的关于进程优先级的指令和函数调用4、与进程优先级有关的一些进程性质二、环境变量1、基本概念2、和环境变量相关的命令3、Linux中的常见环境变量介绍4、环境变量的组织方式以及在C代…...

编程日记 2023/3/23 9:04:46

UE实现建筑分层抽屉展示效果

文章目录 1.实现目标2.实现过程2.1 基础设置2.2 核心函数3.参考资料1.实现目标 使用时间轴对建筑楼层的位置偏移进行控制，实现分层抽屉的动画展示效果。 2.实现过程 建筑抽屉的实现原理比较简单，即对Actor的位置进行偏移，计算并更新其世界位置即可。这里还是基于ArchVizExp…...

编程日记 2023/3/23 8:59:45

【C语言进阶：刨根究底字符串函数】 strstr 函数

本节重点内容&#xff1a; 深入理解strstr函数的使用学会strstr函数的模拟实现⚡strstr strstr的基本使用&#xff1a; #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include<string.h>int main() {char arr1[] "abcdebcdef";char arr2[] &…...

编程日记 2023/3/23 8:54:42

SpringBoot实战（十二）集成Actuator

目录一、简介二、Maven依赖三、使用入门1.HTTP 方式访问端点2.JMX 方式访问端点3.端点信息整理4.端点的启用与禁用5.端点的公开6.保护 HTTP 端点7.配置 CORS 跨域官方文档&#xff1a; https://docs.spring.io/spring-boot/docs/2.4.5/reference/htmlsingle/#production-ready …...

编程日记 2023/4/13 4:52:01

学习系统编程No.7【进程替换】

引言&#xff1a; 北京时间&#xff1a;2023/3/21/7:17&#xff0c;这篇博客本来昨天晚上就能开始写的&#xff0c;但是由于笔试强训的原因&#xff0c;导致时间用在了做题上&#xff0c;通过快2个小时的垂死挣扎&#xff0c;我充分意识到了自己做题能力的缺陷和运用新知识的缺…...

编程日记 2023/4/13 4:53:42

【3.22】操作系统内存管理（整理）、Java并发

3. 内存管理 为什么要有虚拟内存&#xff1f; 我们想要同时在内存中运行多个程序&#xff0c;就需要把进程所使用的地址隔离&#xff0c;所以使用了虚拟内存。简单来说&#xff0c;虚拟内存地址是程序使用的内存地址。物理内存地址是实际存在硬件里面的地址。 操作系统为每个…...

编程日记 2023/4/12 16:33:08

电脑文件丢失怎么找回来

电脑文件丢失怎么找回来?最近打开电脑时&#xff0c;它启动得很慢。刚刚开始我没有没在意&#xff0c;就重启了当我再次打开电脑时&#xff0c;发现桌面上的文件消失了&#xff0c;面对这种意外情况&#xff0c;有什么办法可以快速找到呢? 电脑文件丢失后&#xff0c;想要找回…...

编程日记 2023/3/23 8:34:31

Python（白银时代）——面向对象

基本概念 面向过程 是早期的一个编程概念&#xff0c;类似函数&#xff0c;但是没有返回值 具体做法&#xff1a; 把完成某个需求的所有步骤&#xff0c;从头到尾 逐步实现 将某些功能独立的代码 封装成一个又一个 函数 然后顺序调用不同的函数 特点&#xff1a; 注重 步骤…...

编程日记 2023/3/23 8:29:30

Python流星雨代码

前言 用Python画场流星雨看看&#xff0c;源码见文末公众号哈。 流星类 def __init__(self): self.r ra.randint(50,100) self.t ra.randint(1,3) self.x ra.randint(-2000,1000) #流星的横坐标 self.y ra.randint(0,500) #流星…...

编程日记 2023/3/23 8:24:27

Java语言-----类与对象的秘密

目录 前言 一、类与对象的介绍 二、类的实例化 三.类与对象的使用方法 3.1对象的初始化 3.2内存显示图 四.this的使用方法 总结 &#x1f63d;个人主页&#xff1a; tq02的博客_CSDN博客-C语言,Java领域博主 &#x1f308;理想目标&#xff1a;努力学习&#xff0c;向Java进…...

编程日记 2023/3/23 8:19:25

大数据处理学习笔记2.1 初识Spark

文章目录零、本节学习目标一、Spark的概述&#xff08;一&#xff09;Spark的组件1、Spark Core2、Spark SQL3、Spark Streaming4、MLlib5、Graph X6、独立调度器、Yarn、Mesos&#xff08;二&#xff09;Spark的发展史1、发展简史2、目前最新版本二、Spark的特点&#xff08;一…...

编程日记 2023/4/12 16:34:27

太强了，英伟达面对ChatGPT还有这一招...

大家好&#xff0c;我是 Jack。 今年可谓是 AI 元年&#xff0c;ChatGPT、AIGC、VITS 都火了一波。 我也先后发布了这几期视频&#xff1a; 这是一个大模型的时代&#xff0c;AI 能在文本、图像、音频等领域大放异彩&#xff0c;得益于大模型。而想要预训练大模型&#xff0c…...

编程日记 2023/4/13 4:55:40

【微服务】—— Nacos注册中心

文章目录一、Nacos 注册中心的设计原理1、数据模型2、数据⼀致性3、负载均衡4、健康检查二、Nacos 注册中心服务数据模型1、服务&#xff08;Service&#xff09;和服务实例&#xff08;Instance&#xff09;1&#xff09;定义服务2&#xff09;服务元数据3&#xff09;定义实例…...

编程日记 2023/3/23 8:04:20

GPT-4是个编程高手，真服了！

上周给大家发了一个GPT-4教数学的介绍&#xff0c;很多人都被震撼了&#xff0c;感觉有可能在教育行业引发革命。它在编程领域表现如何&#xff1f;先不说能否替代程序员&#xff0c;这个还有待更多的测试和反馈&#xff0c;我想先试试它能不能像教数学那样教编程。我找了个Jav…...

编程日记 2023/4/12 16:37:21

基于深度学习的车型识别系统（Python+清新界面+数据集）

摘要&#xff1a;基于深度学习的车型识别系统用于识别不同类型的车辆&#xff0c;应用YOLO V5算法根据不同尺寸大小区分和检测车辆&#xff0c;并统计各类型数量以辅助智能交通管理。本文详细介绍车型识别系统&#xff0c;在介绍算法原理的同时&#xff0c;给出Python的实现代码…...

编程日记 2023/3/23 7:54:15

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2026/1/21 9:20:07

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2026/2/8 12:24:34

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2026/1/25 3:21:09

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2026/1/31 14:55:53

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2026/2/1 3:19:54

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2026/1/31 11:13:53

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2026/1/30 16:24:23

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/11/2 5:30:15

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

编程新知 2026/1/31 8:55:37