一、先看效果图吧
二、说明一下
输入框左侧的数值是限制input输入的，即如果input框中输入的大于其左侧的数值就把它赋值为左侧的数值；(第一个颜色输入框：输入20，其输入框内数值为15)；
这个判定标准不是因为输入框左侧的数值，而是由一个函数控制(下方代码体现)，函数内通过for循环把每个input框中的数值累加到一起并赋值到总数框内；
当任何一刻input框中数值改变时，总数也实时改变；
三、完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js多行input输入框限制分值实时统计总分数</title>
</head>
<style>
div {
margin-bottom: 5px;
display: flex;
align-items: center;
}
div input{
height: 25px;
border: 1px solid rgb(233, 231, 231);
outline-style: none;
margin-left: 5px;
}
#sum{
display: inline-block;
width: 100px;
height: 25px;
border: 1px solid rgba(255, 187, 187,1);
}
</style>
<body>
<div>颜色(15)<input type="number" id="a" oninput="handleSum('a', 15)"><br></div>
<div>整齐(20)<input type="number" id="b" oninput="handleSum('b', 20)"><br></div>
<div>特色(15)<input type="number" id="c" oninput="handleSum('c', 15)"><br></div>
<div>绿化(20)<input type="number" id="d" oninput="handleSum('d', 20)"><br></div>
<div>清洁(15)<input type="number" id="e" oninput="handleSum('e', 15)"><br></div>
<div>文明(15)<input type="number" id="f" oninput="handleSum('f', 15)"><br></div>
<div>总数：<span id="sum"></span></div>
<script>
// 获取所有input输入框
const iptlist = document.getElementsByTagName("input")
// 函数传参（id,分值限制）
function handleSum(id, num) {
let currentEle = document.getElementById(id)
if (currentEle.value > num) currentEle.value = num
if (currentEle.value < 0) currentEle.value = 0
let sum = 0;//定义一个总数变量
// 利用循环把每个输入框的值加起来
for (let i = 0; i < iptlist.length; i++) {
sum = sum + iptlist[i].value * 1
}
// 最后赋值到要输出的标签
document.getElementById('sum').innerHTML = sum
}
</script>
</body>
</html>