操作公式来计算总分

这里是一个codepen jQuery。操作公式来计算总分

var $oBox = $('.outer-box'); 
 
var $gpa = $('#gpa'); 
 
var $result = $('.result').hide(); 
 

 
$('.btn').click(function() { 
 
    $('.block').last().clone().children().val("").parent().appendTo($('.inner-box')); 
 
}); 
 

 
$oBox.on('keyup', '.points', function() { 
 
    $gpa.text(getTotal()); 
 
}); 
 

 
$oBox.on("change", ".total-points", function() { 
 
    $gpa.text(getTotal()); 
 
    $result.is(":hidden") && $result.show(); 
 
}); 
 

 
function getTotal() { 
 
    var gradeTotal = 0; 
 
    var sum = 0; 
 
    $(".points").each(function() { 
 
    var $this = $(this); 
 
    if(!isNaN($this.val()) && !isNaN($this.parent().find('.total-points').val())) { 
 
     sum += parseFloat($this.val() || 0) * parseFloat($this.parent().find('.total-points').val() || 0); 
 
     gradeTotal += parseFloat($this.val() || 0) 
 
    } 
 
    }); 
 
    return (sum/gradeTotal).toFixed(2); 
 
} 
 

 
$(".btn").on("click", function() { 
 
    
 
    $('html, body').animate({scrollTop:$(document).height()}, 'slow'); 
 
    return false; 
 
});

body { 
 
    background-color: #A00000; 
 
    background-size: cover; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.title { 
 
    font-size: 5rem; 
 
    text-align: center; 
 
} 
 

 
.outer-box { 
 
    border: 3px solid black; 
 
    height: true; 
 
    width: 75%; 
 
    padding: 10px; 
 
    margin: 10px auto 10px auto; 
 
    border-radius: 10px; 
 
    background-color: white; 
 
} 
 

 
.spacer { 
 
    margin-bottom: 20px; 
 
} 
 

 
#class-name { 
 
    margin-left: 5px; 
 
    font-size: 2rem; 
 
    font-weight: bold; 
 
} 
 

 
.assignment { 
 
    width: 150px; 
 
    height: 35px; 
 
    padding: 5px; 
 
    margin:10px; 
 
    font-size: 20px; 
 
    border: 1px solid gray; 
 
    border-radius: 5px; 
 
} 
 

 
.points { 
 
    border: 1px solid gray; 
 
    border-radius: 5px; 
 
    width: 100px; 
 
    margin: 10px; 
 
    height: 35px; 
 
    padding: 5px; 
 
} 
 

 
.block { 
 
    margin-bottom: 20px; 
 
} 
 

 
.btn { 
 
    border: 2px solid black; 
 
    font-weight: bold; 
 
    width: 150px; 
 
    text-align: center; 
 
    margin: 10px; 
 
    padding: 5px; 
 
} 
 

 
.result { 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 2px solid black; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
    margin: 20px auto 20px auto; 
 
} 
 

 
#gpa { 
 
    font-size: 4rem; 
 
    color: black; 
 
    font-weight: bold; 
 
} 
 

 
.total-points { 
 
    border: 1px solid gray; 
 
    border-radius: 5px; 
 
    width: 100px; 
 
    margin: 10px; 
 
    height: 35px; 
 
    padding: 5px; 
 
} 
 
#fixedbutton { 
 
    position: fixed; 
 
    bottom: 0px; 
 
    right: 0px; 
 
    background-color: white; 
 
    color: white; 
 
    padding: 10px; 
 
    z-index: 1; 
 
    border: solid 5px #00338A; 
 
    border-radius: 5px; 
 
    margin: 10px; 
 
} 
 
#fixedbutton img { 
 
    height: 30px; 
 
    width: 30px; 
 
}

<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> 
 
</head> 
 
<body> 
 
    <div class='outer-box'> 
 
    <div class='inner-box'> 
 
     <form class='block'> 
 
     <input type="text" class='assignment' placeholder="Assignment"> 
 
     </br> 
 
     <input type="number" class='points' placeholder="Points"> 
 
     </br> 
 
     <input type="number" class='total-points' placeholder="Total Points"> 
 
     </form> 
 
    </div> 
 

 
    <div class='btn btn-default'>Add Grade</div> 
 
    <div class='result'> 
 
     <h3 id="gpa">GPA</h3> 
 
    </div> 
 
    </div> 
 
    <div class='spacer'></div> 
 

 
</body>

如何操纵jQuery的代码，并添加了获得积分的总量，然后通过点的两个输入的总数除以。那么显示结果呢？

来源

2016-12-16 Zachmalter

请阅读[问]。重要短语：“搜索和研究”和“解释......阻止你自己解决它的任何困难”。 –

目前你的代码是

function getTotal() { 
    var gradeTotal = 0; 
    var sum = 0; 
    $(".points").each(function() { 
    var $this = $(this); 
    if(!isNaN($this.val()) && !isNaN($this.parent().find('.total-points').val())) { 
     sum += parseFloat($this.val() || 0) * parseFloat($this.parent().find('.total-points').val() || 0); 
     gradeTotal += parseFloat($this.val() || 0) 
    } 
    }); 
    return (sum/gradeTotal).toFixed(2); 
}

所以，如果我的 '点' 和20 '总分' 进入10它这个计算：

总和+ = 10 * 20

gradeTotal + = 10

return 200/10（= 20）

如果我理解正确，你真的想要10/20 = .5

这很容易解决。只要改变这两条线。

sum += parseFloat($this.val() || 0); 
    gradeTotal += parseFloat($this.parent().find('.total-points').val() || 0);

随着您继续添加更多成绩，这将保持累积分数。

来源

2016-12-16 20:39:09 RSSM

操作公式来计算总分

回答

相关问题