如何创建一个注册表格的圆形轮廓仪

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/

Answer 2

这里是我的回答：

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不能正常工作。