// 用的ajax加载，ajax没做兼容封装，所以不兼容ie6，联动后会有颜色动画
// code:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<script src="ADS.js"></script>
<script src="myLogger.js"></script>
<title></title>
</head>
<body>
<select name="postalCode" id="postalCode">
<option value="518049">518049</option>
<option value="510000">510000</option>
<option value="0">0</option>
</select>
<br>
<input id="street" type="text">
<input id="city" type="text">
<input id="province" type="text">
<script>
function isPostalCode(s) {
return (s.length === 6);
}
function FadeColor(from, to, callback, duration, framesPerSec) {
this.from = from;
this.to = to;
this.callback = callback;
// 以秒表示的渐变效果持续时间
this.duration = duration || 1;
// 在给定持续时间内动画的帧数
this.framesPerSec = framesPerSec || this.duration * 15;
}
// setTimeout()的包装函数
// 用于基于帧数计算延迟时间
FadeColor.prototype.doTimeout = function (color, frame) {
var that = this;
setTimeout(function () {
try {
that.callback(color);
} catch (e) {
// 对异常进行调试
ADS.log.write(e);
}
}, (that.duration * 1000 / that.framesPerSec) * frame);
};
FadeColor.prototype.init = function () {
var r, g, b;
var frame = 1;
// 在第0帧设置渐变的开始颜色
this.doTimeout(\'rgb(\' + this.from.r + \',\' + this.from.g + \',\' + this.from.b + \')\', 0);
// 计算两帧之间RGB值的改变量
while (frame < this.framesPerSec + 1) {
// 不断接近目标的值
r = Math.ceil(this.from.r * ((this.framesPerSec - frame) / this.framesPerSec)
+ this.to.r * (frame / this.framesPerSec));
g = Math.ceil(this.from.g * ((this.framesPerSec - frame) / this.framesPerSec)
+ this.to.g * (frame / this.framesPerSec));
b = Math.ceil(this.from.b * ((this.framesPerSec - frame) / this.framesPerSec)
+ this.to.b * (frame / this.framesPerSec));
// 为这一阵调用延时函数
this.doTimeout(\'rgb(\' + r + \',\' + g + \',\' + b + \')\', frame);
frame++;
}
};
ADS.addEvent(window, \'load\', function () {
var postalCode = ADS.$(\'postalCode\');
var a = function (s) {
var a1 = new FadeColor({
// 起始颜色
r: 0,
g: 255,
b: 0
}, {
// 结束颜色
r: 255,
g: 255,
b: 255
}, function (color) {
// 将颜色应用到元素中
ADS.setStyle(s, {
\'background-color\': color
});
});
return a1.init();
};
ADS.addEvent(postalCode, \'change\', function () {
var newPostalCode = this.value;
if (!isPostalCode(newPostalCode)) {
return;
}
var req = new XMLHttpRequest();
req.open(\'POST\', \'serve.js?postalCode=\' + newPostalCode, true);
req.onreadystatechange = function () {
if (req.readyState === 4) {
if (req.status >= 200 && req.status < 300 || req.status === 304) {
eval(req.responseText);
if (ADS.$(\'street\').value !== street) {
ADS.$(\'street\').value = street;
a(\'street\');
}
if (ADS.$(\'city\').value !== city) {
ADS.$(\'city\').value = city;
a(\'city\');
}
if (ADS.$(\'province\').value !== province) {
ADS.$(\'province\').value = province;
a(\'province\');
}
}
}
};
req.send();
});
});
</script>
</body>
</html>
// serve.js:
var street,city,province;
if(newPostalCode == \'518049\'){
street = \'123 Somewhere\';
city = \'Ottawa\';
province = \'Ontario\';
} else {
street = \'asdasd\';
city = \'asdasd\';
province = \'Oasdasd\';
}