// 用的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';
}