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

蓝桥杯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));
}

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);
     })
 }

相关文章:

  • 区块链基本原理
  • Redis单线程还是多线程?IO多路复用原理
  • Element table组件内容\n换行解决办法
  • Day14 文件操作
  • 【百面成神】Redis基础11问,你能坚持到第几问
  • 配置IDEA自带Maven插件的镜像源
  • 简介虚拟地址空间:保障进程间独立性的机制
  • 【剑指offer】旋转数组的最小数字
  • 手写一个简单的RPC框架
  • 如何创建和编写项目管理计划?
  • 算法设计与分析 实验五 贪心算法
  • 正式环境关闭swagger
  • 动态内存的开辟
  • 【分布式版本控制系统Git】| IDEA 集成 Git 、IDEA 集成 GitHub
  • C语言指针链表
  • 深入了解以太坊
  • 9月CHINA-PUB-OPENDAY技术沙龙——IPHONE
  • -------------------- 第二讲-------- 第一节------在此给出链表的基本操作
  • 实现windows 窗体的自己画,网上摘抄的,学习了
  • Asm.js的简单介绍
  • ES6 ...操作符
  • Java IO学习笔记一
  • Java多态
  • node和express搭建代理服务器(源码)
  • PHP 的 SAPI 是个什么东西
  • php的插入排序,通过双层for循环
  • React16时代,该用什么姿势写 React ?
  • vue-loader 源码解析系列之 selector
  • 不用申请服务号就可以开发微信支付/支付宝/QQ钱包支付!附:直接可用的代码+demo...
  • 极限编程 (Extreme Programming) - 发布计划 (Release Planning)
  • 前端知识点整理(待续)
  • 世界编程语言排行榜2008年06月(ActionScript 挺进20强)
  • 新手搭建网站的主要流程
  • 白色的风信子
  • 京东物流联手山西图灵打造智能供应链,让阅读更有趣 ...
  • ​ssh-keyscan命令--Linux命令应用大词典729个命令解读
  • #LLM入门|Prompt#1.8_聊天机器人_Chatbot
  • #pragam once 和 #ifndef 预编译头
  • #QT(串口助手-界面)
  • (CVPRW,2024)可学习的提示:遥感领域小样本语义分割
  • (PHP)设置修改 Apache 文件根目录 (Document Root)(转帖)
  • (vue)el-checkbox 实现展示区分 label 和 value(展示值与选中获取值需不同)
  • (附源码)spring boot球鞋文化交流论坛 毕业设计 141436
  • (七)理解angular中的module和injector,即依赖注入
  • (三维重建学习)已有位姿放入colmap和3D Gaussian Splatting训练
  • (十六)Flask之蓝图
  • (十三)Maven插件解析运行机制
  • (原)记一次CentOS7 磁盘空间大小异常的解决过程
  • (转)ORM
  • (转)视频码率,帧率和分辨率的联系与区别
  • .locked1、locked勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复
  • .mkp勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复
  • .NET MVC 验证码
  • .net6 webapi log4net完整配置使用流程
  • .NET多线程执行函数