一、HTML结构部分

<div id="box"><div class="div1">r (红色): 0<input type="range" class="range" min="0" value="0" max="255" id="">255 <br>g(绿色): 0<input type="range" class="range" min="0" value="0" max="255" id="">255 <br>b(蓝色): 0<input type="range" class="range" min="0" value="0" max="255" id="">255 <br><div id="rgb"></div> <br></div><div class="flowers"><div class="petals"></div><div class="petals"></div><div class="petals"></div><div class="petals"></div><div class="petals"></div><div class="petals"></div><div class="petals"></div><div class="petals"></div></div></div>

在一个大盒子box中，上方为颜色选择框，下方为花瓣部分

二、CSS样式部分

 <style>#box {width: 500px;height: 500px;margin: 50px auto;}.div1 {width: 300px;height: 100px;}.flowers {position: relative;height: 400px;width: 400px;}.petals {position: absolute;left: 200px;top: 200px;width: 70px;height: 70px;border-radius: 0 100% 0 100%;border: solid 1px;transform-origin: -10px -10px;}.petals:nth-child(2) {transform: rotate(45deg);}.petals:nth-child(3) {transform: rotate(90deg);}.petals:nth-child(4) {transform: rotate(135deg);}.petals:nth-child(5) {transform: rotate(180deg);}.petals:nth-child(6) {transform: rotate(225deg);}.petals:nth-child(7) {transform: rotate(270deg);}.petals:nth-child(8) {transform: rotate(315deg);}</style>

主要是设置花瓣的位置，transform-origin：确定动画的原点，然后因为有8片花瓣，每片花瓣的旋转占比为360/8=45deg,这里对花瓣进行每片相隔45deg（角度），实现8片刚好围成一个圆。

三、JS代码部分

<script>var petals = document.getElementsByClassName('petals') //获取所有花瓣var ranges = document.getElementsByClassName('range')  //获取调色条var rgb = document.getElementById('rgb')  //获取显示颜色rgb值面板for (var i = 0; i < petals.length; i++) {(function (i) {petals[i].onclick = function () {for (var j = 0; j < petals.length; j++) {//排他思想： 先移除selected类名petals[j].classList.remove('selected')petals[j].style.border = '1px solid'}//添加selected类名，修改样式this.classList.add('selected')this.style.border = '2px dashed'rgb.innerHTML = ''}}(i))}for (var i = 0; i < ranges.length; i++) {(function (i) {ranges[i].oninput = function () {if (document.querySelector('.selected')) {var selected = document.querySelector('.selected');selected.style.backgroundColor = `rgb(${ranges[0].value},${ranges[1].value},${ranges[2].value})`selected.style.border = '1px solid'rgb.innerHTML = `rgb(${ranges[0].value},${ranges[1].value},${ranges[2].value})`}}}(i))}</script>

首先获取所有花瓣，所有调色条，以及用来显示rgb值的div盒子。

然后给花瓣循环绑定点击事件，这里需要一个匿名的自调用函数来储存i的值，不然事件绑定不上，i值会变为最终长度值。另一个解决办法是将for循环中声明i的关键字变为let，因为let关键字声明的变量有自己的块级作用域。

然后利用"排他思想"循环遍历将所有花瓣的selected类名去掉，然后给当前点击的花瓣添加被选中的类名"selected"将边框变为虚线，表示被选中。

下面一个for循环同样利用了匿名的自调用函数存储i值，然后给所有的调色条绑定input事件（这个事件是当input的值一旦发生改变就会立即触发该事件）。

首先判断一下是否有被选中的元素（不然如果没选择的话拖动调色条会报错），然后通过判断之后获取带有selected类名的花瓣，然后将其背景颜色改为三个input输入的value值，最后将三个rgb值渲染到显示rgb值的div盒子中，这样一个彩色花瓣的效果就完成了。

（这里的渲染部分用到了ES6中的模板字符串，详情可以通过查阅相关资料了解）。

四、代码总结

<!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"><title>Document</title><style>#box {width: 500px;height: 500px;margin: 50px auto;}.div1 {width: 300px;height: 100px;}.flowers {position: relative;height: 400px;width: 400px;}.petals {position: absolute;left: 200px;top: 200px;width: 70px;height: 70px;border-radius: 0 100% 0 100%;border: solid 1px;transform-origin: -10px -10px;}.petals:nth-child(2) {transform: rotate(45deg);}.petals:nth-child(3) {transform: rotate(90deg);}.petals:nth-child(4) {transform: rotate(135deg);}.petals:nth-child(5) {transform: rotate(180deg);}.petals:nth-child(6) {transform: rotate(225deg);}.petals:nth-child(7) {transform: rotate(270deg);}.petals:nth-child(8) {transform: rotate(315deg);}</style>
</head><body><div id="box"><div class="div1">r (红色): 0<input type="range" class="range" min="0" value="0" max="255" id="">255 <br>g(绿色): 0<input type="range" class="range" min="0" value="0" max="255" id="">255 <br>b(蓝色): 0<input type="range" class="range" min="0" value="0" max="255" id="">255 <br><div id="rgb"></div> <br></div><div class="flowers"><div class="petals"></div><div class="petals"></div><div class="petals"></div><div class="petals"></div><div class="petals"></div><div class="petals"></div><div class="petals"></div><div class="petals"></div></div></div><script>var petals = document.getElementsByClassName('petals') //获取所有花瓣var ranges = document.getElementsByClassName('range')  //获取调色条var rgb = document.getElementById('rgb')  //获取显示颜色rgb值面板for (var i = 0; i < petals.length; i++) {(function (i) {petals[i].onclick = function () {console.log(petals[i].classList);for (let j = 0; j < petals.length; j++) {//排他思想： 先移除selected类名petals[j].classList.remove('selected')petals[j].style.border = '1px solid'}//添加selected类名，修改样式this.classList.add('selected')this.style.border = '2px dashed'rgb.innerHTML = ''}}(i))}for (var i = 0; i < ranges.length; i++) {(function (i) {ranges[i].oninput = function () {if (document.querySelector('.selected')) {var selected = document.querySelector('.selected');selected.style.backgroundColor = `rgb(${ranges[0].value},${ranges[1].value},${ranges[2].value})`selected.style.border = '1px solid'rgb.innerHTML = `rgb(${ranges[0].value},${ranges[1].value},${ranges[2].value})`}}}(i))}</script>
</body></html>

感谢浏览！

用H5新增标签实现自定义彩色花瓣相关推荐

H5新增标签以及常用标签
H5新增标签以下是一些常用的标签 1.结构标签 (1)section:独立内容区块,可以用h1~h6组成大纲,表示文档结构,也可以有章节.页眉.页脚或页眉的其他部分: (2)article:特殊独立 ...
H5新增标签、CSS3新增属性总结
一.H5新增标签新增元素说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vid ...
前端H5新增标签和CSS3高级
文章目录一.CSS3高级技巧 1.精灵图 2.字体图标 3.CSS中的三角 3.CSS用户界面样式 4.vertical-align属性应用 5.溢出的文字省略号显示 6.常见布局技巧 6.CSS初 ...
web语义化与h5新增标签
Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:"这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接." Web语义化有三个阶段: 1.h1~h6.t ...
h5新增标签和表单属性
一.h5新增结构性标签(有意义的div) 1.header 定义网页的头部 2.nav 定义网页的导航部分 3.section 定义网页的某个区域 4.footer 定义网页的底部 5.article ...
粉阿吉整理(5)之------H5 新增标签
-1. 结构写法上更加的简单化(DOCTYPE/charset) 相关面试题(DOCTYPE) 1). DOCTYPE声明必须是HTML文档的第一行,位于标签之前 2). DOCTYPE声明不是HT ...
h5新增标签及css3新增属性
面试中经常被问,支支吾吾的老是答不全!!血泪教训,决定记下来! h5是html的最新版本,是14年由w3c完成标准制定.增强了,浏览器的原生功能,减少浏览器插件(eg:flash)的应用,提高用户体验 ...
h5新增标签和表单元素
h5新增表单元素 1. video 2. audio标签 3.datalist标签 4. progress标签 5. 表单新增元素 1. video 作用:播放视频 video常用标签属性: src: ...
H5新增标签详细解说
html5新增标签标签名描述 header 头部 nav 导航 section 区分大模块 aside 侧边栏 article 文章 figure 图片标记文档中的图像 figcaption 配图 ...

用H5新增标签实现自定义彩色花瓣

一、HTML结构部分

二、CSS样式部分

三、JS代码部分

四、代码总结

用H5新增标签实现自定义彩色花瓣相关推荐

最新文章

热门文章