住房和城乡建设部网站办事大厅,个人网站备案名称填写的注意事项,石狮app网站开发价格,十大景观设计网站介绍 相信做过前端开发的小伙伴们对渐变色在 UI 设计中的流行度一定不陌生#xff0c;网页上也时常可以看到各类复杂的渐变色生成工具。使用原生的 CSS 变量加一些 JS 函数就能做出一个简单的渐变色背景生成器。
现在渐变色生成器只完成了颜色选取的功能#xff0c;需要大家…介绍 相信做过前端开发的小伙伴们对渐变色在 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 langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /link relstylesheet hrefstyles.css /titleGradient Generator/title/headbodydiv classcontrolsinput idcolor1 typecolor namecolor1 value#00dbde /input idcolor2 typecolor namecolor2 value#fc00ff //divdiv classgradient/divscript srcindex.js/script/body
/htmlcss /* 注意这里定义的 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[typecolor] {-webkit-appearance: none;border: none;width: 60px;height: 60px;border-radius: 5px;
}input[typecolor]::-webkit-color-swatch-wrapper {padding: 0;margin: 0;
}input[typecolor]::-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)
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);})}
