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

俗人844

已于 2022-11-08 19:32:51 修改

阅读量460

点赞数 5

分类专栏：前端文章标签： html 前端 javascript html5

于 2022-11-05 18:25:47 首次发布

本文链接：https://blog.csdn.net/qq_61955502/article/details/127705063

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

这几天学了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>

在一个大盒子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>

感谢浏览！