Question

是否有一些简单的方法来计算div中填充输入的百分比？
它必须是 Javascript ，而不是jQuery。

这是我的HTML代码

<div class="content-menu">                                      
 <ul>
  <li id="tab1"><a id="a1">General</br><p> x % FILLED </p></a></li>
  <li id="tab2"><a id="a2">Contact info</br><p> x % FILLED </p></a></li>
 </ul>
</div> 

<div id="tabs-1">
 <input type="text" name="first_name" />
 <input type="text" name="last_name" />
</div>

....

所以基本上如果我只输入第一个名字，即输入的1/2，它应该在那个li元素中回显50％。
每个选项卡将具有不同数量的输入和自己的填充百分比。

只有Javascript可以吗？

任何帮助都会得到满足，谢谢。

Answer 1

最初，您可以获取div内的所有输入字段。然后你可以看到他们有多少。之后你可以算出它们中有多少有价值。使用这两个数字，你可以得到你想要的。

// Get the div you want to look in.
var div = document.getElementById("tabs-1");

// Get all the input fields inside your div
var inputs = div.getElementsByTagName('input');

// Get the number of the found inputs.
var totalInputs = inputs.length;

// Loop through them and check which of them has a value.
var inputsWithValue = 0;
for(var i=0; i<totalInputs; i++)
    if(inputs[i].value!=='')
        inputsWithValue +=1;     

// Calculate the percentage.
var filledPercentage = (inputsWithValue/totalInputs)*100;

Answer 2

这里有一个即时更新百分比的小提琴：http://jsfiddle.net/39xdvo96/1/

<div class="content-menu">
    <ul>
        <li id="tab1"><a id="a1">Percentage<br/><p id="percentage">0%</p></a>

        </li>
    </ul>
</div>
<div id="tabs-1">
    <input type="text" name="first_name" />
    <input type="text" name="last_name" />
</div>

的Javascript

  var getInputs = document.getElementsByTagName('input');

    for (i = 0; i < getInputs.length; i++) {

        getInputs[i].onkeyup = function () {

            var elem = document.getElementsByTagName('input');
            var vals = [].map.call(elem, function (input) {
                return input.value;
            });

        var filteredvals = vals.filter(function(val) {
        return !(val === "" || typeof val == "undefined" || val === null);
        });

            document.getElementById('percentage').innerHTML = filteredvals.length/(elem.length) * 100 +"%";


        };

}

计算div内填充输入的百分比

2 个答案: