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

How to create a circle shaped profile meter for a registration form

本文关键字：轮廓 仪表 创建 表单 注册 注册表      更新时间：2023-09-26

我有一个名为 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>

更改55%等的呼叫fillMeter(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/

这是我的答案：

http://cssdeck.com/labs/full/bwxqiw1z

$("#calculate-form").click(function(e) {
  // calculate total number of inputs
  var numberInputsTotal = $("input").size();
  // find all input values that are not empty
  var inputsEmpty = $('input:not([value!=""])')
  var numberInputsFilled = numberInputsTotal - inputsEmpty.size();
  alert(numberInputsFilled);
  // calculate width
  var width = (100/numberInputsTotal) * numberInputsFilled;
  // set width
  $("#fill-form .fill").css({'width': width + '%', 'height':'20', 'background': 'red'});
  
  e.preventDefault();
});
  width: 100%;
}
#container div#fill-form {
  position: relative;
  width: 200px;
  height: 20px;
  border: 1px solid grey;
  border-radius: 3px;
  margin: 10px;
  background: yellow;
}
#container div#fill-form .fill {
  display: inline-block;
  position: relative;
}
#container div.form {
  display: block;
  padding: 10px;
}
#container div.calculate {
  padding: 10px;
}
#container div.calculate a {
  text-decoration: none;
  color: #fff;
  background: #116adf;
  padding: 7px 15px;
  border-radius: 3px;
  transition: .5s;
}
#container div.calculate a:hover {
  opacity: .8;
}
#container label {
  width: 100%;
  display: block;
  margin-bottom: 5px;
}
#container input {
  display: block;
}
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="container">
  
  <div id="fill-form">
     <div class="fill"></div>
  </div>
  
  <div class="form">
    <label for="name">Name:</label>
    <input name="name" type="text" value="" placeholder="Your Name" />
  </div>
  
  <div class="form">
    <label for="lastname">Lastname:</label>
    <input name="lastname" type="text" value="" placeholder="Your Lastname"/>
  </div>
  <div class="form">
    <label for="email">E-mail:</label>
    <input name="email" type="email" value="" placeholder="Your E-mail"/>
  </div>
  <div class="form">
    <label for="username">Username:</label>
    <input name="username" type="text" value="" placeholder="Your Username"/>
  </div>
  <div class="form">
    <label for="password">Password:</label>
    <input name="password" type="text" value="" placeholder="Your Password"/>
  </div>
  <div class="calculate">
    <a id="calculate-form" href="">Calculate</a>
  </div>
  
</div>

为了获得最佳结果，我建议仅将此处插入的所有代码复制并粘贴到新的html文件中，然后对该文件进行测试。似乎与 SO 集成的代码播放器无法正常运行。

相关文章：