Javascript 使用jquery设置样式的随机值_Javascript_Jquery_Css

Javascript 使用jquery设置样式的随机值

javascript jquery css

Javascript 使用jquery设置样式的随机值,javascript,jquery,css,Javascript,Jquery,Css,我想创建一个边界半径生成器。我已经创建了4个滑块。一个用于左上半径，一个用于右上半径，一个用于左下半径，一个用于右下半径我创建了一个div，当用户更改每个滑块时，它应该更改每个角半径，但即使我移动滑块，也不会发生任何变化这是我的密码： <!DOCTYPE html> <html> <head>

我想创建一个边界半径生成器。我已经创建了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>


边界半径生成器
var tl=$（“#tl”）.val（）+“px”；
var tr=$（“#tr”）.val（）+“px”；
var bl=$（“#bl”）.val（）+“px”；
var br=$（“btr”）.val（）+“px”；
变量半径=函数（）{
$（“#代码区”）.css（“边界半径”、“tl tr bl br”）；
}
身体{
背景：rgba（198,75,67,0.8）；
}
h1{
字体系列：“Comic Sans MS”；
文本对齐：居中；
}
p{
字体系列：Verdana，impact；
}
#代码区{
保证金：0自动；
高度：20em；
宽度：20em；
背景：水；
边框：4倍实心暗金色；
}
输入[type=“range”]{
背景色：红色；
}
#br，#tr{
浮动：对；
}
#tl，#tr{
边缘顶端：4em；
}
#bl，#br{
边缘底部：4em；
}
#发电机{
显示：块；
保证金：自动；
背景：金；
宽度：80%；
边框：3件纯金；
}
简单边界半径生成器
只需更改滑块并获取代码

当您调用

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

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

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


变量半径=函数（）{
var tl=$（“#tl”）.val（）+“px”，
tr=$（“#tr”）.val（）+“px”，
bl=$（“#bl”）.val（）+“px”，
br=$（“#br”）.val（）+“px”；
$（“#代码区”）.css（“边界半径”，tl+''+tr+''+bl+''+br）；
}

您的javascript和html都有问题。我还修改了代码，只更改滑块所引用的角点

$（“#代码区”）.css（“边界半径”、“tl tr bl br”）这是将边界半径属性设置为字符串“tl tr bl br”，而不是这些变量的组合


您的tl、tr、bl、br变量仅在事件处理程序外部设置一次。因此，对它们的任何更改都不会被记录。
3.
缺少=符号。所以，这个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>

$(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);
    });
});