使用jquery为样式设置随机值

I want to create a border-radius generator.I have created 4 sliders.One for top left radius one for top right radius ,one for bottom left and one for bottom right I have created a div that's supposed to change every corner radius when the users change each slider but even when i move the slider nothing happens Here is my code:

我想创建一个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>

3 个解决方案

#1

You have issues in both your javascript and your html. I also reworked the code to only change the corner that the slider is referencing.

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

$("#codearea").css("border-radius","tl tr bl br"); This is setting the border-radius property to the string 'tl tr bl br', not the combination of those variables.

$(“#codearea”)。css(“border-radius”,“tl tr bl br”);这是将border-radius属性设置为字符串'tl tr bl br',而不是这些变量的组合。

Your tl, tr, bl, br variables are only set once outside your event handler. So any changes to them will not be recorded. 3.<div id "generator"> is missing the = sign. So, this div does not have an id

你的tl,tr,bl,br变量只在事件处理程序之外设置一次。因此,不会记录对它们的任何更改。 3.

缺少=符号。所以,这个div没有id

Your input tags were not closed.

您的输入标签未关闭。

The range input fires a change event not a click event.

范围输入触发更改事件而不是单击事件。

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/

#2

When you make a call to radius() when a slider changes, it uses the variables that were already set, and only set once, when the page loaded.

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

In other words, these lines:

换句话说,这些行:

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

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

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

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

are not re-run when radius() is called.

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

You should really move those into the radius function.

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

                            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");
                            }

#3

A lot of mistakes in your code. Your script should look like:

你的代码中有很多错误。您的脚本应如下所示:

<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>

#1