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

介绍
相信做过前端开发的小伙伴们对渐变色在 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));
}

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

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

propertyname 必需。一个字符串，表示创建或修改的属性。
value 可选，新的属性值。
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前端练习-----渐变色背景生成器相关推荐

蓝桥杯 —— Web前端（数据交互类）【标题即题目链接，点击查看具体要求】
简介
蓝桥杯Web应用开发
文章目录介绍策略课程题目学习笔记 1.水果拼盘 2.分一分 3.冬奥大抽奖 4.灯的颜色变化 5.购物车 6.类型判断 7.商品销量和销售额实时展示看板 8.粒粒皆辛苦 9.水果叠叠乐 10 ...
【蓝桥杯Web】2022年第十三届蓝桥杯Web大学组国赛真题解析
前言省赛真题解析见: 2022年第十三届蓝桥杯Web大学组省赛真题解析(完整版) 2022年第十三届蓝桥杯Web大学组省赛真题解析(精华版) 更多蓝桥杯题解请查阅专栏:蓝桥杯之前写省赛解析时篇幅过 ...
【蓝桥杯Web】第十三届蓝桥杯（Web 应用开发）省赛真题
前言第十三届蓝桥杯全国软件和信息技术专业人才大赛(软件类)新开了Web应用开发比赛,本文介绍第十三届蓝桥杯Web应用开发的省赛题目以及解析. 文章目录前言一.水果拼盘二.展开你的扇子三.和手 ...
蓝桥杯 Web 应用开发模拟赛首次公开！参赛选手速进！
第十三届蓝桥杯大赛报名通道正式开启,你行动起来了吗? 很多细心的小伙伴一定看到了,这届蓝桥杯大赛中新增了 Web 应用开发组.这是 Web 应用开发首次出现在杯赛中,所以没有历年真题可以供参赛选手刷题 ...
Web前端，CSS背景图片大小、文字阴影、盒子阴影、过渡
前言持续学习总结输出中,今天分享的是Web前端,CSS背景图片大小.文字阴影.盒子阴影.过渡背景图片大小 background-size:宽度高度; 设置背景图片的大小取值场景数字+px ...
[前端学习笔记1]蓝桥杯Web应用开发组考点内容
蓝桥杯新推出了前端组,正好在找实习的方向,决定先学学前端,以赛促学,希望明年暑假能找到一个前端的实习(导师允许的前提下). 我完全是前端小白一个呀(准确的说开发小白一个,后端我也不会,但是我也想成为全 ...
2022.4.9第十三届蓝桥杯web组省赛个人题解
2022第十三届蓝桥杯第一次开放了web组赛道,博主作为一名前端小白,参加了这次比赛.一共十个题目,目的均是实现特定的网页效果,考点包含三件套.jQuery和vue,这里简单的进行一下个人的题解记录. ...
【蓝桥杯Web】大一小白参与蓝桥杯模拟赛二期web组体会
目录前言一.相关比赛介绍 1.ACM国际大学生程序设计竞赛 2.蓝桥杯 3.GPLT团队程序设计天梯赛 4.leetcode周赛和双周赛 5.PAT 二.蓝桥杯 1.应该参加蓝桥杯吗? 2.如何进 ...

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

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

最新文章

热门文章