个人中心
gpt4 book ai didi

javascript - Border Radius 生成器无故停止工作

转载 作者：太空宇宙 更新时间：2023-11-04 03:33:27 25 4
gpt4 key购买 nike

我创建了一个在线 CSS3 Border Radius 生成器。一切正常，直到昨天停止工作。我尝试使用 Firefox 的 Javascript 控制台，并告诉我查看代码的第 83 行。我查看了它，但我可以由于我是 Javascript 的新手，所以不知道出了什么问题。你能帮我吗？提前致谢!!!这是第 81 到 83 行:

$("#generator").css(corner, newRad);/也改变外半径/

});

这是我的代码:HTML:

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Border Radius generator</title>
    <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <META NAME="author" CONTENT="kounelios13">
        <META NAME="subject" CONTENT="programming">
        <META NAME="Description" CONTENT="Create rounded corners for whatever object you want with this border radius generator">
        <META NAME="Classification" CONTENT="No javascript is needed just pure CSS3">
        <META NAME="Keywords" CONTENT="programming,web design,tools,generator">
        <META NAME="Designer" CONTENT="kounelios13">
        <META NAME="distribution" CONTENT="Global">
        <META NAME="country" CONTENT="Greece">
        <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.min.css">
        <link rel="stylesheet" type="text/css" href="../../css/general.css">
        <link rel="stylesheet" type="text/css" href="../../css/navbar-head.css">
        <link rel="stylesheet" type="text/css" href="../../css/apps/borderRadius(old).css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="../../js/bootstrap.js" type="text/javascript"></script>
        <script src="../../js/prefixfree.js" type="text/javascript"></script>
        <script src="../../js/apps/borderRadius.js" type="text/javascript"></script>



</head>
<body>
<?php include '../menu.php'; ?>

        <div class="container">
            <div class="jumbotron bg-info">

            <h1 class="text-center text-info">CSS3 border radius generator v0.1 BETA</h1>

            <p>The only thing you have to do is to change each slider and get the code.So <span class="text-info">simple</span>
            Or you can enter your own values in the form bellow and see the results. <strong>Results are in px but in the form you can use whatever you want</strong>.
            To reset the shape type 0 in the form and press submit.

            </p>


            </div>
            <div>
            <input type="text" id="userSet" class="btn bg-success text-info text-center formed form-import" placeholder="Enter your own values"/><button  class="btn btn-danger formed" onclick="setForm()">Submit</button>
            </div>



            <div class="row">
            <div class="col-md-6">
            <input type="range" class="ranges form-control pull-left" id="tl" min="0" max="1000" step="1" value="0" >   
            </div>
            <div class="col-md-6">
            <input type="range" class="ranges pull-right form-control" id="tr" min="0" max="1000" step="1" value="0" >  </div></div>
            <div id="codearea" class="pull-right" >
                <!--This is the basic div for transformations-->

            </div>
            <div id="output" class="pull-left bg-info">
                <!--Here starts the code from the sliders-->
                 border-radius:<span class="topl"></span> <span class="topr"></span> <span class="botl"></span> <span class="botr"> </span>
                <div class="prefixed"> -webkit-border-radius:<span class="topl"></span> <span class="topr"></span> <span class="botl"></span> <span class="botr"></span>
                 -moz-border-radius:<span class="topl"></span> <span class="topr"></span> <span class="botl"></span> <span class="botr"></span></div>
                 <!--Here it ends-->
                <div class='formed'>

                 Code from text input:<br>
                 border-radius:<span class="form-output"></span>;</div>
                 <div class="prefixed">
                 -webkit-border-radius:<span class="form-output"></span>;</span><br>
                 -moz-border-radius:<span class="form-output"></span>;</span><br>
                 <a onclick="$('.prefixed').toggle(893);" class="btn btn-danger ">Toggle prefixes</a>
                 <a onclick="$('.formed').toggle(893);" class="btn btn-danger ">Toggle form input</a>
                </div>


            </div>


        </div><br>
        <div class="container upside">
            <div class="row"><div class="col-md-6">
            <input type="range" class="ranges form-control pull-left" id="bl" min="0" max="1000" step="1" value="0">
            </div>
            <div class="col-md-6">  
            <input type="range" class="ranges form-control pull-right" id="br" min="0" max="1000" step="1" value="0" >
            </div></div>    <br>
            <div class="btn btn-info" onclick="$('.navbar-footer').toggle(890);">Toggle footer</div>
        </div>  

        <div class="navbar navbar-default navbar-static-bottom navbar-footer navbar-foot">
            <div class="container">
                <p >Site build by <a href="http://kounelios13.blogspot.gr" class="navbar-btn btn btn-primary ">kounelios13</a></p>
            </div>
        </div>  
</body>
</html>

我的 Javascript 文件:

var user=function(){
        $first=$("#tl").val();
        $second=$("#tr").val();
        $third=$("#bl").val();
        $fourth=$("#br").val();

            $(".topl").html($first+"px");
            $(".topr").html($second+"px");
            $(".botl").html($third+"px");
            $(".botr").html($fourth+"px");


        };

function  setForm() {
  $(".ranges").val(0);/*Reset each slider back to 0*/
  $("#output span").html("0px");/*Erases the code generated by the sliders*/

$('#codearea').css('border-radius', $('#userSet').val());
var val=document.getElementById('userSet');
var formCode=val.value;
$('.form-output').html(formCode);
}
$(document).ready(function () {
  $radiusTrue=$("#otherWay").val();
  $("#submit").click(


    function(){




      var raded=$("#otherWay").text();
      $codearea.css(raded);





    }




    )
  $('.botr').after(';<br>');
    var $property = $(".code");
    var $codearea =  $("#codearea");


    $('.ranges').on('change',function() {
         if (raded != null){
          $codearea.css("border-radius","0px")
         }
         else{

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

           case 'br' :
               corner = "border-bottom-right-radius";

               break;                
        }
        $codearea.css(corner, newRad);
       user();

        $("#generator").css(corner, newRad);/*also change and the outter radius*/

    });}
});

最佳答案

你加载了两次 jQuery，而且是两个不同的版本!

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

关于javascript - Border Radius 生成器无故停止工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25960025/

25 4 0
文章推荐： c - GMP 计算器卡在幂数上
文章推荐： c - 仅使用 Gradle 构建静态库
文章推荐： c - OpenGL glBegin 和 glPushMatrix
文章推荐： python - 按列从具有多个逻辑条件的 numpy 数组中选择
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com