用H5新增标签实现自定义彩色花瓣
这几天学了h5新增元素，想着可以实现个自定义颜色小案例。
效果如下：
实现思路，点击花瓣时添加一个选中类名，然后通过上方 input 属性为 type=‘range’，给花瓣添加背景颜色。
一、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>
html
在一个大盒子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>
css
主要是设置花瓣的位置，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')
for (var i = 0; i < petals.length; i++) {
(function (i) {
petals[i].onclick = function () {
for (var j = 0; j < petals.length; j++) {
petals[j].classList.remove('selected')
petals[j].style.border = '1px solid'
}
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>
javascript
运行
首先获取所有花瓣，所有调色条，以及用来显示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')
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++) {
petals[j].classList.remove('selected')
petals[j].style.border = '1px solid'
}
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>
html
感谢浏览！
相关知识
JSTL自定义标签（三）
使用Flexible实现手淘H5页面的终端适配(转)
万全网络自定义版下载
Temu标签生成工具
农产品溯源系统快捷打印彩色溯源标签方法
H5在线制作帮你实现七夕活动促销！
用花瓣做成的彩色花卉地毯图片
Kazumi：自定义工具全能引擎，打造专属追番体验
2025年六款标签制作工具评测
H5开发指南
网址: 用H5新增标签实现自定义彩色花瓣 https://www.huajiangbk.com/newsview2566530.html
| 上一篇: android颜色color.x |
下一篇: 和平精英怎么打彩色字体 彩色聊天 |
推荐分享
- 1君子兰什么品种最名贵 十大名 4012
- 2世界上最名贵的10种兰花图片 3364
- 3花圈挽联怎么写？ 3286
- 4迷信说家里不能放假花 家里摆 1878
- 5香山红叶什么时候红 1493
- 6花的意思,花的解释,花的拼音 1210
- 7教师节送什么花最合适 1167
- 8勿忘我花图片 1103
- 9橄榄枝的象征意义 1093
- 10洛阳的市花 1039
