var skills = [
{"header" : "INTERESTS",
"captions" : [
"Cooking",
"Web",
"Mobile",
"Design",
"AI"
],
"values" : [
0.70,
0.90,
0.70,
0.80,
0.70
]
},
{"header" : "LANGUAGES",
"captions" : [
"nodeJS",
"PHP",
"JS",
"Ruby",
"Java"
],
"values" : [
0.80,
0.85,
0.90,
0.70,
0.90
]
},
{"header" : "MISC",
"captions" : [
"Eclipse",
"Git",
"Rails",
"OpenGL",
"Linux"
],
"values" : [
0.85,
0.85,
0.75,
0.60,
0.80
]
}
];
var pentagonIndex = 0;
var valueIndex = 0;
var width = 0;
var height = 0;
var radOffset = Math.PI/2
var sides = 5; // Number of sides in the polygon
var theta = 2 * Math.PI/sides; // radians per section
function getXY(i, radius) {
return {"x": Math.cos(radOffset +theta * i) * radius*width + width/2,
"y": Math.sin(radOffset +theta * i) * radius*height + height/2};
}
var hue = [];
var hueOffset = 25;
for (var s in skills) {
$(".content").append('<div class="pentagon" id="interests"><div class="header"></div><canvas class="pentCanvas"/></div>');
hue[s] = (hueOffset + s * 255/skills.length) % 255;
}
$(".pentagon").each(function(index){
width = $(this).width();
height = $(this).height();
var ctx = $(this).find('canvas')[0].getContext('2d');
ctx.canvas.width = width;
ctx.canvas.height = height;
ctx.font="15px Monospace";
ctx.textAlign="center";
/*** LABEL ***/
color = "hsl("+hue[pentagonIndex]+", 100%, 50%)";
ctx.fillStyle = color;
ctx.fillText(skills[pentagonIndex].header, width/2, 15);
ctx.font="13px Monospace";
/*** PENTAGON BACKGROUND ***/
for (var i = 0; i < sides; i++) {
// For each side, draw two segments: the side, and the radius
ctx.beginPath();
xy = getXY(i, 0.3);
colorJitter = 25 + theta*i*2;
color = "hsl("+hue[pentagonIndex]+",100%," + colorJitter + "%)";
ctx.fillStyle = color;
ctx.strokeStyle = color;
ctx.moveTo(0.5*width, 0.5*height); //center
ctx.lineTo(xy.x, xy.y);
xy = getXY(i+1, 0.3);
ctx.lineTo(xy.x, xy.y);
xy = getXY(i, 0.37);
console.log();
ctx.fillText(skills[ pentagonIndex].captions[valueIndex],xy.x, xy.y +5);
valueIndex++;
ctx.closePath();
ctx.fill();
ctx.stroke();
}
valueIndex = 0;
ctx.beginPath();
ctx.fillStyle = "rgba(0, 0, 0, 0.2)";
ctx.strokeStyle = "rgba(0, 0, 0, 0.3)";
ctx.lineWidth = 5;
var value = skills[pentagonIndex].values[valueIndex];
xy = getXY(i, value * 0.3);
ctx.moveTo(xy.x,xy.y);
/*** SKILL GRAPH ***/
for (var i = 0; i < sides; i++) {
xy = getXY(i, value * 0.3);
ctx.lineTo(xy.x,xy.y);
valueIndex++;
value = skills[pentagonIndex].values[valueIndex];
}
ctx.closePath();
ctx.stroke();
ctx.fill();
valueIndex = 0;
pentagonIndex++;
});
body{
\t background-color: #2D2D2D;
}
.carousel-spacing{
\t padding-left: 20px;
\t padding-right: 20px;
\t padding-bottom: 20px;
}
.circle{
\t width: 158px;
\t height: 158px;
\t margin: 50px auto;
\t text-align: center;
\t background-color: #51bbb5;
\t overflow: hidden;
\t border-radius: 50%;
\t border: 5px solid #fff;
}
.carousel {
display: none;
}
#graph{
\t position: relative;
\t z-index: 1;
\t width: 125px;
\t height: 90px;
\t margin: 30px auto 0;
}
#graph div{
\t position: absolute;
\t bottom: 16px;
\t width: 9px;
\t height: 10px;
\t background: #fff;
}
#graph div:nth-child(n+1){
\t height: 16px;
\t left: 24px;
\t animation: chartIt 2s ease-in-out 0s;
\t -webkit-animation: chartIt 2s 1 ease-in-out 0s;
}
#graph div:nth-child(n+2){
\t height: 26px;
\t left: 37px;
\t animation: chartIt 2s ease-in-out .25s;
\t -webkit-animation: chartIt 2s 1 ease-in-out .25s;
}
#graph div:nth-child(n+3){
\t height: 42px;
\t left: 50px;
\t animation: chartIt 2s ease-in-out .5s;
\t -webkit-animation: chartIt 2s 1 ease-in-out .5s;
}
#graph div:nth-child(n+4){
\t height: 37px;
\t left: 63px;
\t animation: chartIt 2s ease-in-out .75s;
\t -webkit-animation: chartIt 2s 1 ease-in-out .75s;
}
#graph div:nth-child(n+5){
\t height: 50px;
\t left: 76px;
\t animation: chartIt 2s ease-in-out 1s;
\t -webkit-animation: chartIt 2s 1 ease-in-out 1s;
}
#graph div:nth-child(n+6){
\t height: 60px;
\t left: 89px;
\t animation: chartIt 2s ease-in-out 1.25s;
\t -webkit-animation: chartIt 2s 1 ease-in-out 1.25s;
}
@keyframes chartIt{
\t 0% { max-height: 60px; }
\t 50% { max-height: 0px; }
\t 100% { max-height: 60px; }
}
@-webkit-keyframes chartIt{
\t 0% { max-height: 60px; }
\t 50% { max-height: 0px; }
\t 100% { max-height: 60px; }
}
.content {
margin: auto;
text-align: center;
}
#c {
margin: auto;
}
.header {
text-align: center;
width: 100%;
margin: auto;
height: 25px;
}
.pentagon {
width: 300px;
height: 300px;
margin: auto;
padding: 3px 3px 28px 3px;
display:inline-block;
}
<!DOCTYPE html>
<html>
<head>
\t <title>Timothy Lampen</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
\t <nav class="navbar navbar-default">
\t \t <div class="container-fluid">
\t \t \t <div class="navbar-header">
\t \t \t \t <a class="navbar-brand" href="#">Brand</a>
\t \t \t </div>
\t \t \t <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
\t \t \t \t <ul class="nav navbar-nav">
\t \t \t \t \t <li class="active"><a href="#">Home</a></li>
\t \t \t \t \t <li><a href="#">Academics</a></li>
\t \t \t \t \t <li><a href="#">Sports</a></li>
\t \t \t \t \t <li><a href="#">HTML</a></li>
\t \t \t \t \t <li><a href="#">Java</a></li>
\t \t \t \t </ul>
\t \t \t </div>
\t \t </div>
\t </nav>
\t <div id="myCarousel" class="carousel slide carousel-spacing" data-ride="carousel">
\t \t <div class="carousel-indicators">
\t \t \t <ol class="carousel-indicators">
\t \t \t \t <li data-target="#myCarousel" data-slide-to="0"></li>
\t \t \t \t <li data-target="#myCarousel" data-slide-to="1"></li>
\t \t \t \t <li data-target="#myCarousel" data-slide-to="2"></li>
\t \t \t \t <li data-target="#myCarousel" data-slide-to="3"></li>
\t \t \t </ol>
\t \t </div>
\t \t <div class="carousel-inner" role="listbox">
\t \t \t <div class="item active">
\t \t \t \t <img src="http://www.photoz.com.au/slides/Gibson%20Desert.jpg" alt="Pic1">
\t \t \t </div>
\t \t \t <div class="item">
\t \t \t \t <img src="http://public.blu.livefilestore.com/y1pGz7y63cz8C2SNLsVyxkkFtSQB8Vd8VVrkNRkVirRuMoUbXGHPC2IL7T5HFeTpZYS9eeprUcOyyr_n3iuYjwBow/The%20Desert.jpg" alt="Pic2">
\t \t \t </div>
\t \t \t <div class="item">
\t \t \t \t <img src="http://cahierslibres.fr/wp-content/uploads/2014/04/d%C3%A9sert.jpg" alt="Pic3">
\t \t \t </div>
\t \t \t <div class="item">
\t \t \t \t <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Wandering_in_the_desert.jpg/1280px-Wandering_in_the_desert.jpg" alt="Pic4">
\t \t \t </div>
\t \t </div>
\t \t <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
\t \t \t <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
\t \t \t <span class="sr-only">Previous</span>
\t \t </a>
\t \t <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
\t \t \t <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
\t \t \t <span class="sr-only">Next</span>
\t \t </a>
\t </div>
\t <div class="circle">
\t \t <div id="graph">
\t \t \t <div></div>
\t \t \t <div></div>
\t \t \t <div></div>
\t \t \t <div></div>
\t \t \t <div></div>
\t \t \t <div></div>
\t \t \t <div></div>
\t \t \t <div></div>
\t \t </div>
\t </div>
\t
</body>
</html>
<script type="text/javascript" src="script.js"></script>
<script>
\t $(document).ready(function(){
function changeAd(){ $(".circle").fadeOut(1000).delay(1000).addClass(".content").removeClass(".circle");
$(".carousel").delay(1000).fadeIn(1000);
}
setTimeout(changeAd, 3000);
\t \t \t });
</script>
_「所以，我怎麼就能夠使其加載延遲的script.js文件的加載後級的div已經被切換到‘內容’」 _第二次調用' .delay（）'不會延遲'.delay（1000）'。 'script'加載到'js'的問題在哪裏？請移除 – guest271314
，與代碼中的問題部分無關。它打破了視力 – iamawebgeek