input输入数值自动计算

有很多时候我们需要在一些输入框输入某一些内容后然后就在其他地方显示出来一些结果，例如计算一些和、差、商、积等等，也可以有复杂的运算，只要符合你的需求即可。

例如下面一个例子的，通过填写去程预计时间和回程预计时间计算出总预计时间，其实方法很简单，就是获取到去程和回程的预计时间一加起来就是总预计时间了。

    但是我们在页面上只能给输入框输入数值，这需要电脑自己去计算。需要让电脑自己执行计算的方法就要使用到一个事件，onchange()改变事件。通过改变事件可以在输入框的内容发生改变时触发我们写好的计算方法，然后计算出结果值。因为总预计时间=去程预计时间+回程预计时间，所以改变事件要写到去程和回程两个输入框上。

    完成这个功能的全部代码都在上面了，效果图：

验证输入值的原因是判断一下输入的值是否为整数或者为一到两位小数的小数。而且获取到的值不能直接运算，需要转换一下类型，因为获取到的内容是字符串类型的，如果不转换的情况下运算是无法完成是，如果是相加就会出现字符串拼接的情况。

    parseFloat是转换成浮点型这样可以计算小数、整数，当然也可以转换成整型（parseInt），但只能计算整数。如果需要计算小数时一定不要忘记了一个事情，它们相加的结果和我们平时计算的结果是不相等的。例如0.1+0.2是不等于0.3的。

所以在计算小数时只需要保留2位小数即可，就是计算结果最后加上的toFixed(2),需保留多少位就写多少。

最后一个问题就是当只输入了一个输入框的情况下，不进行判断赋值的话会出现总预计时间的输入框显示NaN。因为空字符串无法转换成数字类型，出现无法计算的情况，所以要判断如果有为空的值就使这个值为0这样就可以计算了。

这样子输入数值自动计算的功能就完成了，自动计算其实就是体现在改变事件上。用这个方法你可以运行更为复杂的运算过程。