Question

我想创建一个border-radius生成器。我创建了4个滑块。一个用于左上半径，一个用于右上半径，一个用于左下角，一个用于右下角我创建了一个div，当用户改变每个滑块时，它应该改变每个角半径但是即使我移动滑块也没有任何反应这是我的代码：

<!DOCTYPE html>
                                <html>
                                <head>
                                    <title>Border radius generator</title>


                                <script type="text/javascript" src="jquery-2.0.js"></script>
                                <script type="text/javascript">



                                var tl=$("#tl").val() +"px";

                                var tr=$("#tr").val() +"px";

                                var bl=$("#bl").val() +"px";

                                var br=$("btr").val() +"px";

                                var radius =function () {
                                    $("#codearea").css("border-radius","tl tr bl br");
                                }







                                </script>
                                <style type="text/css">

                                body{

                                    background: rgba(198,75,67,0.8);
                                }

                                h1{
                                    font-family: "Comic Sans MS";
                                    text-align: center;
                                }



                                p{
                                    font-family: Verdana,impact;
                                }

                                #codearea{



                                margin: 0 auto;
                                height: 20em;
                                width: 20em;
                                background: aqua;
                                border:4px solid darkgoldenrod;



                                }
                                input[type="range"]{
                                    background-color: red;
                                }
                                #br,#tr{
                                    float: right;
                                }
                                #tl,#tr{
                                    margin-top: 4em;
                                }
                                #bl,#br{
                                    margin-bottom: 4em;
                                }
                                #generator{
                                    display: block;
                                    margin:auto;
                                    background: gold;
                                    width: 80%;
                                    border: 3px solid gold;
                                }
                                </style>    
                                </head>
                                <body>
                                <h1>Simple border radius generator</h1>
                                <p>Just change the sliders and get the code</p>
                                <div id "generator">
                                    <input type="range" id="tl" min="1" max="1000" step="1" onclick="radius()">
                                    <input type="range" id="tr" min="1" max="1000" step="1" onclick="radius()">
                                            <div id="codearea"></div>
                                    <input type="range" id="bl" min="1" max="1000" step="1" onclick="radius()">
                                    <input type="range" id="br" min="1" max="1000" step="1" onclick="radius()">
                                </div>
                                </body>
                                </html>

Answer 1

当滑块更改时调用radius()时，它会使用已设置的变量，并且只在页面加载时设置一次。

换句话说，这些行：

                            var tl=$("#tl").val() +"px";

                            var tr=$("#tr").val() +"px";

                            var bl=$("#bl").val() +"px";

                            var br=$("btr").val() +"px";

在调用radius()时不会重新运行。

你应该把它们移到半径函数中。

                            var radius =function () {
                                var tl=$("#tl").val() +"px";
                                var tr=$("#tr").val() +"px";
                                var bl=$("#bl").val() +"px";
                                var br=$("btr").val() +"px";

                                $("#codearea").css("border-radius","tl tr bl br");
                            }

Answer 2

您的代码中存在很多错误。您的脚本应如下所示：

<script type="text/javascript">
var radius =function () {
        var tl = $("#tl").val() + "px",
        tr = $("#tr").val() + "px",
        bl = $("#bl").val() + "px",
        br = $("#br").val() + "px";
    $("#codearea").css("border-radius",tl + ' ' + tr + ' ' + bl + ' ' + br);
}
</script>

Answer 3

你的javascript和html都有问题。我还重写了代码，只改变了滑块引用的角落。

$("#codearea").css("border-radius","tl tr bl br");这是将border-radius属性设置为字符串＆＃39; tl tr bl br＆＃39;而不是这些变量的组合。
您的tl, tr, bl, br变量仅在事件处理程序之外设置一次。因此，不会记录对它们的任何更改。 3。<div id "generator">缺少=符号。所以，这个div没有id
您的输入标签未关闭。
范围输入会触发更改事件而不是单击事件。

HTML

<div id="generator">
    <input type="range" class="ranges" id="tl" min="1" max="1000" step="1" value="0" />
    <input type="range" class="ranges" id="tr" min="1" max="1000" step="1" value="0" />
    <div id="codearea"></div>
    <input type="range" class="ranges" id="bl" min="1" max="1000" step="1" value="0" />
    <input type="range" class="ranges" id="br" min="1" max="1000" step="1" value="0" />
</div>

javascipt的

$(document).ready(function () {
    var $codearea = $("#codearea");
    $('.ranges').on('change', function () {
        var newRad = $(this).val() + "px",
            corner;
        switch ($(this).attr('id')) {
            case 'tl':
                corner = "border-top-left-radius";
                break;
            case 'tr':
                corner = "border-top-right-radius";
                break;
            case 'bl':
                corner = "border-bottom-left-radius";
                break;
            case 'br':
                corner = "border-bottom-right-radius";
                break;
        }
        $codearea.css(corner, newRad);
    });
});

http://jsfiddle.net/9o83vh2p/2/

使用jquery为样式设置随机值

3 个答案: