技能条不起作用

Skill bar doesn't work

本文关键字：不起作用      更新时间：2023-09-26

好的，我得到了这个html代码: 

<div class="skillbar clearfix " data-percent="20%">
  <div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
  <div class="skillbar-bar" style="background: #e67e22;"></div>
  <div class="skill-bar-percent">20%</div>
</div>
<!-- End Skill Bar -->
<div class="skillbar clearfix " data-percent="25%">
  <div class="skillbar-title" style="background: #2980b9;"><span>CSS3</span></div>
  <div class="skillbar-bar" style="background: #3498db;"></div>
  <div class="skill-bar-percent">25%</div>
</div>
<!-- End Skill Bar -->
<div class="skillbar clearfix " data-percent="50%">
  <div class="skillbar-title" style="background: #2c3e50;"><span>jQuery</span></div>
  <div class="skillbar-bar" style="background: #2c3e50;"></div>
  <div class="skill-bar-percent">50%</div>
</div>
<!-- End Skill Bar -->
<div class="skillbar clearfix " data-percent="40%">
  <div class="skillbar-title" style="background: #46465e;"><span>PHP</span></div>
  <div class="skillbar-bar" style="background: #5a68a5;"></div>
  <div class="skill-bar-percent">40%</div>
</div>
<!-- End Skill Bar -->
<div class="skillbar clearfix " data-percent="75%">
  <div class="skillbar-title" style="background: #333333;"><span>Wordpress</span></div>
  <div class="skillbar-bar" style="background: #525252;"></div>
  <div class="skill-bar-percent">75%</div>
</div>
<!-- End Skill Bar -->
<div class="skillbar clearfix " data-percent="100%">
  <div class="skillbar-title" style="background: #27ae60;"><span>SEO</span></div>
  <div class="skillbar-bar" style="background: #2ecc71;"></div>
  <div class="skill-bar-percent">100%</div>
</div>
<!-- End Skill Bar -->
<div class="skillbar clearfix " data-percent="70%">
  <div class="skillbar-title" style="background: #124e8c;"><span>Photoshop</span></div>
  <div class="skillbar-bar" style="background: #4288d0;"></div>
  <div class="skill-bar-percent">70%</div>
</div>
<!-- End Skill Bar -->

和css的 

.skillbar {
  position: relative;
  display: block;
  margin-bottom: 15px;
  width: 100%;
  background: #eee;
  height: 35px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -webkit-transition: 0.4s linear;
  -moz-transition: 0.4s linear;
  -ms-transition: 0.4s linear;
  -o-transition: 0.4s linear;
  transition: 0.4s linear;
  -webkit-transition-property: width, background-color;
  -moz-transition-property: width, background-color;
  -ms-transition-property: width, background-color;
  -o-transition-property: width, background-color;
  transition-property: width, background-color;
}
.skillbar-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  font-weight: bold;
  font-size: 13px;
  color: #ffffff;
  background: #6adcfa;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.skillbar-title span {
  display: block;
  background: rgba(0, 0, 0, 0.1);
  padding: 0 20px;
  height: 35px;
  line-height: 35px;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.skillbar-bar {
  height: 35px;
  width: 0px;
  background: #6adcfa;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}
.skill-bar-percent {
  position: absolute;
  right: 10px;
  top: 0;
  font-size: 11px;
  height: 35px;
  line-height: 35px;
  color: #ffffff;
  color: rgba(0, 0, 0, 0.4);
}

和js的 

jQuery(document).ready(function() {
  jQuery('.skillbar').each(function() {
    jQuery(this).find('.skillbar-bar').animate({
      width: jQuery(this).attr('data-percent')
    }, 6000);
  });
});

技能栏不动画/不填充。我试着像这样在html中调用js文件: 

<script src="skills.js" type="text/javascript"></script>

我也试着这样做: 

<script type="text/javascript">jQuery(document).ready(function() {
  jQuery('.skillbar').each(function() {
    jQuery(this).find('.skillbar-bar').animate({
      width: jQuery(this).attr('data-percent')
    }, 6000);
  });
});</script>

但仍然不工作。我不知道为什么…顺便说一句，我是一个初学者在这一切，所以请对我有耐心，并试图解释我如何解决它的细节。谢谢大家，我希望我能克服这个，因为我被困住了，我不知道该做什么了。

你的代码确实工作，问题是你如何包含你的javascript。是否包含jQuery ?如果没有，尝试包含它的一个版本:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

我试着用第一个js剪辑，它工作了(我告诉jsfiddle在幕后包括jquery): https://jsfiddle.net/v21gak4q/

首先附加一个jquery库

<script src="your link to js file or CDN link"></script>

然后改变一些css来正确显示你的技能栏(它目前没有显示准确)

jQuery(document).ready(function() {
  jQuery('.skillbar').each(function() {
    jQuery(this).find('.skillbar-bar').animate({
      width: jQuery(this).attr('data-percent')
    }, 6000);
  });
});

相关文章：