javascript - 如何为注册表创建圆形轮廓仪

Question

我有一个名为 registration.html 的表单。我想包括一个百分比剖面图。配置文件仪表应根据用户输入的字段更改完成百分比，如 10%、20% 等。我想用 html、javascript、css 来做。

谢谢

Answer 1

类似 LinkedIn 的是:

function fillMeter(percent) {
  var pixels = (percent/100) * 90;
  $(".fill").css('top', (90-pixels) + "px");
  $(".fill").css('height', pixels + "px");
}

fillMeter(40);

.fill {
  position: absolute;
  left: 0;
  width: 90px;
  background-color: green;
  overflow:hidden;
}
.mask {
  display: block;
  height: 90px;
  left: 0;
  position: absolute;
  top: 0;
  width: 90px;
  overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;">
  <div class="fill"></div>
  <img class="mask" src="https://static.licdn.com/scds/common/u/img/pic/pic_profile_strength_mask_90x90_v2.png"></img>
</div>

要将百分比调用 fillMeter(55) 更改为 55% 等。显示如下:

function fillMeter(percent) {
  var pixels = (percent/100) * 90;
  $(".fill").css('top', (90-pixels) + "px");
  $(".fill").css('height', pixels + "px");
}

fillMeter(55);

.fill {
  position: absolute;
  left: 0;
  width: 90px;
  background-color: green;
  overflow:hidden;
}
.mask {
  display: block;
  height: 90px;
  left: 0;
  position: absolute;
  top: 0;
  width: 90px;
  overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;">
  <div class="fill"></div>
  <img class="mask" src="https://static.licdn.com/scds/common/u/img/pic/pic_profile_strength_mask_90x90_v2.png"></img>
</div>

工作 JSFiddle:http://jsfiddle.net/5aufgL8o/1/