如何使我的技能图表使用一个分数字母，而不是百分比

How can I make my skills graph use a grade letter, rather than a percentage?

本文关键字：数字 一个 百分比 我的 何使      更新时间：2024-03-03

我到处寻找这个特定的需求，但找不到任何好的来源。我有一张"技能"图，可以显示我完成任务的能力。我的问题是，我不希望它显示百分比，而是字母等级（a+，a，B，C）

这是链接

这是代码

<script type="text/javascript">
  
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
function grow() {
  var element = '.bar';
  var i = 1;
  $(element).each(function(index, value) {
    var percent = $(this).attr('data-percent');
    var timing = percent / 100;
    setTimeout(function() {
      $(value).css('max-width', +percent + '%').css('transition', timing + 's ease all');
      $(value).append('<div class="num">' + percent + '%</div>');
    }, i * 50);
    i++;
  });
}
$(window).load(function() {
  requestAnimationFrame(grow);
});
</script>
.bar {
  background: white;
  border-top: 1px solid #b4996d;
  width: 100%;
  max-width: 0;
  height: 25px;
  margin: 0 0 10px 0;
  border-top-style: dotted;
}
.num {
  line-height: 22px;
  color: #b4996d;
  font-size: 12px;
  text-align: right;
  font-family: 'open_sansbold';
}
.label-graph {
  line-height: 22px;
  position: absolute;
  color: #333;
  font-size: 12px;
  font-family: 'open_sansbold';
}
.holder {
  margin: 0 auto;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="holder">
  <div class="bar" data-percent="95">
    <span class="label-graph">Web Design</span>
  </div>
  <div class="bar" data-percent="95">
    <span class="label-graph">Graphic Design</span>
  </div>
  <div class="bar" data-percent="95">
    <span class="label-graph">Photoshop</span>
  </div>
  <div class="bar" data-percent="80">
    <span class="label-graph">HTML5</span>
  </div>
  <div class="bar" data-percent="90">
    <span class="label-graph">Illustration</span>
  </div>
  <div class="bar" data-percent="85">
    <span class="label-graph">Print</span>
  </div>
</div>

下面是一个简单的例子，说明@lux在注释中的建议。你在data-percent属性上添加条件，它就在：）上

点击此处查看

$(function(){
  $('.bar').each(function(i,v){
    data = $(this).data('percent');
    // just an example, you can set whatever you wants as value and conditions
    if(data > 80){
      $(this).addClass('grade-Aplus');
    }
    else if(data <= 80 && data > 60){
      $(this).addClass('grade-A');
    }else{
      $(this).addClass('grade-B');
    }               
  });
});

CSS

.bar:before {content:""; width: 0; height: 30px; background: blue; position: absolute; left: 0; top: 0; transition: all 0.5s; }
.bar { position: relative; margin: 15px 0; padding: 7px 0 0 110px}
.bar.grade-Aplus:before { width: 100px; content: "A+"; color: #fff;}
.bar.grade-A:before { width: 80px; content: "A"; color: #fff}
.bar.grade-B:before { width: 30px; content: "B"; color: #fff}
/* and so on ... :) */
相关文章：