概述
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 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>
</html>效果图：
实时显示的！！！
普及小知识：
onkeyup：键盘按下的时候会触发onkeydown，松开键盘时会出发onkeyup。
parseInt：parseInt() 函数可解析一个字符串，并返回一个整数。
parseInt("10");
//返回 10
parseInt("19",10);
//返回 19 (10+9)
最后
以上就是兴奋冬日为你收集整理的利用js实现input输入数据后自动进行计算，实时显示数据的全部内容，希望文章能够帮你解决利用js实现input输入数据后自动进行计算，实时显示数据所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复