如何创建一个注册表格的圆形轮廓仪
问题描述:
我有一个名为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/
答
这里是我的回答:
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不能正常工作。
@@ Simply Craig:当用户在文本框/字段中输入值时,我想要填写轮廓仪(增加 - >百分比)。你可以加我脚本吗? – 2014-11-20 20:03:49
@*是的,它是。 – 2014-11-20 20:14:08
@*现在只需调用数字百分比为0-100的'fillMeter()',它将显示“填充”圆圈。 – 2014-11-20 20:56:45