我创建了一个在线 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/