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

我有一个名为registration.html的表格。我想包括一个百分比轮廓仪。轮廓仪应根据用户输入的字段更改完成百分比，如10％，20％，依此类推。我想用html，javascript，css来做。

谢谢

最佳答案

像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/