js 花瓣自定定义

最新推荐文章于 2024-09-24 13:22:48 发布

兮兮的酱羊肉

最新推荐文章于 2024-09-24 13:22:48 发布

阅读量238

点赞数

文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/u012863185/article/details/126014201

版权

花瓣自定定义，方便以后使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>花瓣</title>
    <style type="text/css">
        .leaf-box {
            display: flex;
            justify-content: center
        }

        .leaf-box .leaf {
            width: 100px;
            height: 100px;
            background-color: #000;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
        }
    </style>
</head>
<body>

<div class="leaf-box">
    <div id="leaf" class="leaf"></div>
</div>
<div id="leafCss"></div>

<div>
    宽：<input id="lw""" type="range" value="100" min="1" max="1080" step="1" />
    <br/>
    高：<input id="lh"" type="range" value="100" min="1" max="1080" step="1" />
    <br/>
    颜色：<input id="lc""" type="color" value="#000"/>
    <br/>
    左上：<input id="lt"" type="range" value="0" min="0" max="100" step="1" />
    <br/>
    左下：<input id="lb"" type="range" value="0" min="0" max="100" step="1" />
    <br/>
    右上：<input id="rt"" type="range" value="0" min="0" max="100" step="1" />
    <br/>
    右下：<input id="rb"" type="range" value="0" min="0" max="100" step="1" />
    <br/>
</div>

<script>

    var leaf = document.querySelector('#leaf');
    var leafCss = document.querySelector('#leafCss');
    var lw = document.querySelector('#lw');
    var lh = document.querySelector('#lh');
    var lc = document.querySelector('#lc');
    var lt = document.querySelector('#lt');
    var lb = document.querySelector('#lb');
    var rt = document.querySelector('#rt');
    var rb = document.querySelector('#rb');

    refreshLeafCss();

    lw.oninput = function() {
        leaf.style.width = lw.value + "px";
        refreshLeafCss();
    }

    lh.oninput = function() {
        leaf.style.height = lh.value + "px";
        refreshLeafCss();
    }

    lc.oninput = function() {
        leaf.style.backgroundColor = lc.value;
        refreshLeafCss();
    }

    lt.oninput = function() {
        leaf.style.borderTopLeftRadius = lt.value + "%";
        refreshLeafCss();
    }

    lb.oninput = function() {
        leaf.style.borderBottomLeftRadius = lb.value + "%";
        refreshLeafCss();
    }

    rt.oninput = function() {
        leaf.style.borderTopRightRadius = rt.value + "%";
        refreshLeafCss();
    }

    rb.oninput = function() {
        leaf.style.borderBottomRightRadius = rb.value + "%";
        refreshLeafCss();
    }

    function refreshLeafCss() {
        var css = '';
        css += "width: " + leaf.style.width + ";";
        css += "height: " + leaf.style.height + ";";
        css += "background-color: " + leaf.style.backgroundColor + ";";
        css += "border-top-left-radius: " + leaf.style.borderTopLeftRadius + ";";
        css += "border-bottom-left-radius: " + leaf.style.borderTopLeftRadius + ";";
        css += "border-top-right-radius: " + leaf.style.borderTopRightRadius + ";";
        css += "border-bottom-right-radius: " + leaf.style.borderBottomRightRadius + ";";
        leafCss.innerHTML = css;
    }


</script>
</body>
</html>