Javascript JS代码效果不反映在投资组合中
我正在为一个公文包编写HTML、CSS和JS代码 我已经检查了我的js和html代码，我相信它们没有任何错误 我已经在html文件中包含了css和js外部文件的必要参考 但是js代码不起作用，也没有给出任何错误 这里的js代码负责按照数据百分比填充圆圈/技能栏轮廓 我是一个初学者，我相信有一个非常愚蠢的错误，我无法解决 HTML代码：Javascript JS代码效果不反映在投资组合中,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在为一个公文包编写HTML、CSS和JS代码 我已经检查了我的js和html代码，我相信它们没有任何错误 我已经在html文件中包含了css和js外部文件的必要参考 但是js代码不起作用，也没有给出任何错误 这里的js代码负责按照数据百分比填充圆圈/技能栏轮廓 我是一个初学者，我相信有一个非常愚蠢的错误，我无法解决 HTML代码： <!DOCTYPE html> <html> <head> <link rel="stylesheet" h
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="project2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js">
<script type="text/javascript" src="project2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<meta charset="UTF-8">
<title>Resume</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
</head>
<div class="resume">
<div class="base">
<div class="profile">
<div class="photo">
<!--<img src="" /> -->
</div>
<div class="info">
<img src="unnamed.png" height="100" width="100">
<h1 class="name">Japnit Singh</h1>
<h2 class="job">Software developer Coop</h2>
</div>
</div>
<div class="about">
<h3>About Me</h3>I'm a web designer for Fiserv, specializing in web design, graphic design, and UX.
Experienced with the Adobe Creative Suite, responsive design, social media management, and prototyping.
</div>
<div class="contact">
<h3>Contact Me</h3>
<div class="call"><a href="tel:2899-255-802"><i class="fa fa-phone"></i><span>2899255802</span></a></div>
<div class="address"><a
href="https://www.google.ca/maps/place/1280+Main+St+W,+Hamilton,+ON+L8S+4L8/@43.2618377,-79.9224208,17z/data=!3m1!4b1!4m5!3m4!1s0x882c84ad20954fad:0x28443fc4bf4d1fe!8m2!3d43.2618377!4d-79.9202321"><i
class="fa fa-map-marker"></i><span>McMaster<br> University</span></a>
</div>
<div class="email"><a href="mailto:singj36@mcmaster.ca"><i class="fa fa-envelope"></i><span>Japnit's
Email</span></a></div>
<div class="email"><a href="mailto:singj36@mcmaster.ca"><i class="fa fa-print"></i><span>Japnit's
Resume</span></a></div>
</div>
<div class="follow">
<h3>Follow Me</h3>
<div class="box">
<a href="https://www.facebook.com/japnit.singh.583" target="_blank"><i class="fa fa-facebook"></i></a>
<a href="https://www.linkedin.com/in/japnit-singh-41788a157/" target="_blank"><i
class="fa fa-linkedin"></i></a>
<a href="https://github.com/JapnitS" target="_blank"><i class="fa fa-github"></i></a>
</div>
</div>
</div>
<div class="func">
<div class="work">
<h3><i class="fa fa-briefcase"></i>Experience</h3>
<ul>
<li><span>Technical Consultant -<br>Web Design</span><small>Fiserv</small><small>Apr 2018 - Now</small>
</li>
<li><span>Web Designer</span><small>Lynden</small><small>Jan 2018 - Apr 2018</small></li>
<li><span>Intern - Web Design</span><small>Lynden</small><small>Aug 2017 - Dec 2017</small></li>
</ul>
</div>
<div class="edu">
<h3><i class="fa fa-graduation-cap"></i>Education</h3>
<ul>
<li><span>Bachelor of Science<br>Web Design and Development</span><small>BYU-Idaho</small><small>Jan.
2016 - Apr. 2018</small></li>
<li><span>Computer Science</span><small>Edmonds Community College</small><small>Sept. 2014 - Dec.
2015</small></li>
<li><span>High School</span><small>Henry M. Jackson High School</small><small>Jan. 2013 - Jun.
2015</small></li>
</ul>
</div>
<div class="skills-prog">
<h3><i class="fa fa-code"></i>Programming Skills</h3>
<ul>
<li data-percent="100"><span>Python</span>
<div class="skills-bar">
<div class="bar"></div>
</div>
</li>
<li data-percent="90"><span>C++(OOP)</span>
<div class="skills-bar">
<div class="bar"></div>
</div>
</li>
<li data-percent="60"><span>JavaScript</span>
<div class="skills-bar">
<div class="bar"></div>
</div>
</li>
<li data-percent="50"><span>MySQL</span>
<div class="skills-bar">
<div class="bar"></div>
</div>
</li>
<li data-percent="40"><span>JSON</span>
<div class="skills-bar">
<div class="bar"></div>
</div>
</li>
<li data-percent="55"><span>Django</span>
<div class="skills-bar">
<div class="bar"></div>
</div>
</li>
<li data-percent="40"><span>MySQL</span>
<div class="skills-bar">
<div class="bar"></div>
</div>
</li>
<li data-percent="80"><span>Bash</span>
<div class="skills-bar">
<div class="bar"></div>
</div>
</li>
</ul>
</div>
<div class="skills-soft">
<h3><i class="fa fa-laptop-code"></i>Software Skills</h3>
<ul>
<li data-percent="90">
<svg viewbox="0 0 100 100">
<circle cx="50" cy="50" r="45"></circle>
<circle class="cbar" cx="50" cy="50" r="45"></circle>
</svg><span>Git</span><small>90%</small>
</li>
<li data-percent="75">
<svg viewbox="0 0 100 100">
<circle cx="50" cy="50" r="45"></circle>
<circle class="cbar" cx="50" cy="50" r="45"></circle>
</svg><span>Node.js</span><small>75%</small>
</li>
<li data-percent="85">
<svg viewbox="0 0 100 100">
<circle cx="50" cy="50" r="45"></circle>
<circle class="cbar" cx="50" cy="50" r="45"></circle>
</svg><span>React.js</span><small>85%</small>
</li>
<li data-percent="65">
<svg viewbox="0 0 100 100">
<circle cx="50" cy="50" r="45"></circle>
<circle class="cbar" cx="50" cy="50" r="45"></circle>
</svg><span>Adobe XD</span><small>65%</small>
</li>
</ul>
</div>
<div class="interests">
<h3><i class="fa fa-star"></i>Interests</h3>
<div class="interests-items">
<div class="art"><i class="fa fa-artstation"></i><span>Art</span></div>
<div class="art"><i class="fa fa-book"></i><span>Books</span></div>
<div class="movies"><i class="fa fa-film"></i><span>Movies</span></div>
<div class="music"><i class="fa fa-headphones"></i><span>Music</span></div>
<div class="games"><i class="fa fa-gamepad"></i><span>Games</span></div>
</div>
</div>
</div>
</div>
</html>
你怎么知道有错误？我知道有错误/代码没有做我想做的事情，因为我想根据我输入的百分比填充技能栏，但它只填充整个圆圈，而不填充技能栏中的任何内容。我也在上面的问题中放了一个图片链接供你参考！！在我的电脑上仍然缺少一些东西可以运行。。。（js、css的前导行）请尝试在codepen.io或其他地方创建一个行为示例，我们可以在那里测试和修复；）嘿，我在codepen.io上使用了一个开源代码，可以在这里找到：
$(".skills-prog li")
.find(".skills-bar")
.each(function (i) {
$(this)
.find(".bar")
.delay(i * 150)
.animate({
width: $(this)
.parents()
.attr("data-percent") + "%"
},
1000,
"linear",
function () {
return $(this).css({
"transition-duration": ".5s"
});
}
);
});
$(".skills-soft li")
.find("svg")
.each(function (i) {
var c, cbar, circle, percent, r;
circle = $(this).children(".cbar");
r = circle.attr("r");
c = Math.PI * (r * 2);
percent = $(this)
.parent()
.data("percent");
cbar = (100 - percent) / 100 * c;
circle.css({
"stroke-dashoffset": c,
"stroke-dasharray": c
});
circle.delay(i * 150).animate({
strokeDashoffset: cbar
},
1000,
"linear",
function () {
return circle.css({
"transition-duration": ".3s"
});
}
);
$(this)
.siblings("small")
.prop("Counter", 0)
.delay(i * 150)
.animate({
Counter: percent
}, {
duration: 1000,
step: function (now) {
return $(this).text(Math.ceil(now) + "%");
}
});
});
}.call(this));