WEB页面输入框与显示框数据的同步更新

我们常常在浏览某些网站的时候，会有这样一种现象，在某个输入框输入一些东西，其它一些显示框会跟着一起变化；例如在提交订单页面，有输入框让你输入所购物品的数量，而当你输入的时候，显示价格的显示框会一起变化；今天就来实现这个东西

思路

1） 利用onfocus()事件触发函数

2） 数据要动态同步更新，利用window本身自带的setInterval(func(), timeout)来实现，时间设置为400ms左右就已经能给人一种同步的感觉，并且在func()函数里头实现显示框数据的改变与更新

3） 利用onblur()时间触发函数，调用clearInterval(intID)终止周期性调用func()

在实现过程中，上述过程除了3）出了点问题，就是一直没能终止该周期性调用，试了挺久，不明其所以然，由于没有造成多大影响，也就没去深究了

这里展示关于onfocus()事件触发的函数

function count(){
                interval = setInterval(function(){
                    var c_number = document.getElementsByClassName("c_number"),
                    price = document.getElementsByClassName("price"),
                    whole_number = document.getElementById("whole_number"),
                    value = document.getElementById("value"),
                    temp_number=0, temp_value=0;
                for(var i=0; i                     temp_number += Number(c_number[i].value);
                for(var i=0; i                     temp_value += Number(c_number[i].value) * Number(price[i].innerHTML);
                whole_number.innerHTML = temp_number;
                value.innerHTML = temp_value;
                },400);
            }

谈到这里，顺便谈谈关于javascript中各种操作符

1） 一元自加/自减与C/C++一样

2） 一元加操作符（放在变量前面），对数字没什么影响，而对其它类型的数据，作用和Number()函数一样，将该值执行转换

一元减操作符（放在变量前面），主要用于表示负数，而对其它类型的数据，作用和一元加操作符一样

3） 位操作符，用得不多，就不多说了；用的时候看一下就行了

4） 逻辑非，先将操作对象转换为一个布尔值，然后再对其求反；两个逻辑非将模拟Boolean()转型函数

逻辑与，属于短路操作，若第一个操作数是false，则不管第二个操作数，直接返回false；这也是为什么"true & someUndefinedVariable"会出错而"false & someUndefinedVariable"不出错的原因

逻辑或同逻辑与一样，属于短路操作

5） 乘性操作符

乘法：操作数若不是数值，后台将自动转换（根据一定的规则），空字符串为0等等

除法/求模：同乘法一样

6） 加性操作符

加法：转换规则有点复杂

a)如果两个操作数都是字符串，则拼接

b)如果只有一个是字符串，则将另一个转换为字符串然后拼接（因此想要相加则使用Number()强制转换）

c)如果都是数值，则相加

减法跟加法类似

7） 关系操作符

a)都是数值，执行数值比较

b)都是字符串，比较对应的字符编码值

c)如果一个是数值，则将另外一个转换为数值在比较

d)如果一个是对象，则先调用valueOf()方法进行解析再比较

e)如果一个是布尔值，则先转换成数值再比较

8） 相等操作符

相等与不等：先进行转换再比较

全等与全不等：不进行转换直接比较

9） 条件操作符：variable = boolean_expression ? true_value : false_value; 和C/C++一样

10）逗号操作符：返回表达式中的最后一项