js实现input输入数据后自动进行计算，实时显示数据

最像你的我.

已于 2022-10-14 17:22:49 修改

阅读量5.2k

点赞数 1

文章标签： javascript 前端 html

于 2022-08-02 16:19:00 首次发布

本文链接：https://blog.csdn.net/qq_53966155/article/details/126124464

版权

一、先看效果图吧

二、说明一下

输入框左侧的数值是限制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>