轉載CSDN:https://blog.csdn.net/qq_42249896/article/details/80963514
利用js實現input輸入數據后自動進行計算，實時顯示數據
效果圖:
下面是代碼部分:
<html>
<head>
<meta http-equiv="Content-Type" content="textml; charset=utf-8" />
<title>無標題</title>
<script type="text/javascript">
function sum(obj) {
var z = document.getElementById("z");
var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementById("c");
all.value=parseInt(z.value);
if(a.value!='')
{
y.value=parseInt(a.value);
h.value=parseInt(z.value)-parseInt(a.value);
}
if(a.value!=''&&b.value!='')
{
y.value=parseInt(b.value)+parseInt(a.value);
h.value=parseInt(z.value)-parseInt(a.value)-parseInt(b.value);
}
if(a.value!=''&&b.value!=''&&c.value!='')
{
y.value=parseInt(b.value)+parseInt(a.value)+parseInt(c.value);
h.value=parseInt(z.value)-parseInt(a.value)-parseInt(b.value)-parseInt(c.value);
}
}
</script>
</head>
<body>
總分：<input type="text" id="z" onkeyup="sum(this);" />
<input type="text" id="a" onkeyup="sum(this);" />
<input type="text" id="b" onkeyup="sum(this);" />
<input type="text" id="c" onkeyup="sum(this);" />
總分：<input type='text' id='all' style="border:0px solid white; width:25px" />
已選：<input type='text' id='y' style="border:0px solid white; width:25px" />
還剩：<input type='text' id='h' style="border:0px solid white; width:25px" />
</body>
<ml>
實時顯示的！！！
普及小知識：
onkeyup：鍵盤按下的時候會觸發onkeydown，松開鍵盤時會出發onkeyup。
parseInt：parseInt() 函數可解析一個字符串，並返回一個整數。
parseInt("10"); //返回 10
parseInt("19",10); //返回 19 (10+9)