具有邮编区号查询功能的js+xml版
2008-01-05 10:17:23 来源:WEB开发网 闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁炬儳缍婇弻鐔兼⒒鐎靛壊妲紒鐐劤缂嶅﹪寮婚悢鍏尖拻閻庨潧澹婂Σ顔剧磼閻愵剙鍔ょ紓宥咃躬瀵鎮㈤崗灏栨嫽闁诲酣娼ф竟濠偽i鍓х<闁诡垎鍐f寖闂佺娅曢幑鍥灳閺冨牆绀冩い蹇庣娴滈箖鏌ㄥ┑鍡欏嚬缂併劎绮妵鍕箳鐎n亞浠鹃梺闈涙搐鐎氫即鐛崶顒夋晬婵絾瀵ч幑鍥蓟閻斿摜鐟归柛顭戝枛椤牆顪冮妶搴′簼缂侇喗鎸搁悾鐑藉础閻愬秵妫冮崺鈧い鎺戝瀹撲礁鈹戦悩鎻掝伀缁惧彞绮欓弻娑氫沪閹规劕顥濋梺閫炲苯澧伴柟铏崌閿濈偛鈹戠€n€晠鏌嶆潪鎷屽厡闁汇倕鎳愮槐鎾存媴閸撴彃鍓卞銈嗗灦閻熲晛鐣烽妷褉鍋撻敐搴℃灍闁绘挻娲橀妵鍕箛闂堟稐绨肩紓浣藉煐濮樸劎妲愰幘璇茬闁冲搫鍊婚ˇ鏉库攽椤旂》宸ユい顓炲槻閻g兘骞掗幋鏃€鐎婚梺瑙勬儗閸樺€熲叺婵犵數濮烽弫鍛婃叏椤撱垹纾婚柟鍓х帛閳锋垶銇勯幒鍡椾壕缂備礁顦遍弫濠氱嵁閸℃稒鍊烽柛婵嗗椤旀劕鈹戦悜鍥╃У闁告挻鐟︽穱濠囨嚃閳哄啰锛滈梺褰掑亰閸欏骸鈻撳⿰鍫熺厸閻忕偟纭堕崑鎾诲箛娴e憡鍊梺纭呭亹鐞涖儵鍩€椤掑啫鐨洪柡浣圭墪閳规垿鎮欓弶鎴犱桓闂佸湱枪閹芥粎鍒掗弮鍫熷仺缂佸顕抽敃鍌涚厱闁哄洢鍔岄悘鐘绘煕閹般劌浜惧┑锛勫亼閸婃牠宕濋敃鈧…鍧楀焵椤掍胶绠剧€光偓婵犱線鍋楀┑顔硷龚濞咃絿妲愰幒鎳崇喓鎷犻懠鑸垫毐闂傚倷鑳舵灙婵炲鍏樺顐ゆ嫚瀹割喖娈ㄦ繝鐢靛У绾板秹寮查幓鎺濈唵閻犺櫣灏ㄥ銉р偓瑙勬尭濡繂顫忛搹鍦<婵☆垰鎼~宥囩磽娴i鍔嶉柟绋垮暱閻g兘骞嬮敃鈧粻濠氭偣閸パ冪骇鐎规挸绉撮—鍐Χ閸℃ê闉嶇紓浣割儐閸ㄥ墎绮嬪澶嬪€锋い鎺嶇瀵灝鈹戦埥鍡楃仯闁告鍕洸濡わ絽鍟崐鍨叏濡厧浜鹃悗姘炬嫹

核心提示:这几天制作一个系统的邮编区号查询功能,突发奇想制作了这个js+xml版的,具有邮编区号查询功能的js+xml版,因为xml数据量较大(2000多条记录),所以若是网速较慢的话,每页"+ myPageSize+"条,分"+myPageNum+"页显示,会有画面停顿的现象,我曾打算预
这几天制作一个系统的邮编区号查询功能,突发奇想制作了这个js+xml版的,因为xml数据量较大(2000多条记录),所以若是网速较慢的话,会有画面停顿的现象,我曾打算预加载xml数据,可惜没能实现(光找到了预加载图片的方法,你要知道预加载xml的方法可以告诉我,谢谢)。下面是邮编区号查询js+xml版的核心代码:
1、data.xml文件代码(这里只列了5条,明白他的结构就可以):
<?xml version="1.0" encoding="gb2312"?>
<!-- 邮编区号数据 -->
<MyData>
<Item Province="北京" County="北京" Zipcode="100000" Areacode="010" />
<Item Province="北京" County="通县" Zipcode="101100" Areacode="010" />
<Item Province="北京" County="昌平" Zipcode="102200" Areacode="010" />
<Item Province="北京" County="大兴" Zipcode="102600" Areacode="010" />
<Item Province="北京" County="密云" Zipcode="101500" Areacode="010" />
</MyData>
2、index.htm文件代码(这个就是主界面拉)
<Html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>js+xml的邮编区号查询</title>
<style type="text/Css">
<!--
body,td,th {
font-size: 12px;}
body {
text-align:center;
background-color:#fefefe;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.mainTable{
background-color:#FFFFFF;border:1px solid #dddddd;
}
.foot{
line-height:20px;text-align:left;
}
.foot a:link,.foot a:visited,.foot a:active{
background-color: #f0f0f0;width:45px; height:20px;
margin:5px 0px 0px 0px;padding:3px 3px 2px 3px;
border-right:1px solid #cccccc;border-bottom:1px solid #cccccc;
border-top:1px solid #f5f5f5;border-left:1px solid #f5f5f5;
color:#000000;text-align:center;
line-height:14px;font-size:12px;
}
.head td{
font-size:14px; letter-spacing:2px;
border-bottom:1px solid #dddddd;
text-align:center;height:24px;
FILTER: PRogid:DXImageTransform.Microsoft.Gradient(startColorStr='#fafafa', endColorStr='#f0f0f0', gradientType='0');
}
.Item{
font-size:12px;height:20px;
text-indent:5px;
border-bottom:1px solid #dddddd;
background-color:#fafafa;
}
.Over{
font-size:12px;height:20px;
text-indent:5px;
border-bottom:1px solid #dddddd;
background-color:#f5f5f5;
}
.SearchBar {
font-size:12px; letter-spacing:2px;
border-bottom:1px solid #dddddd;
padding:5px 0px 3px 0px;
margin:4px 0px 4px 0px;
text-align:center;height:24px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#f5f5f5', endColorStr='#eeeeee', gradientType='0');
}
.SearchBar input.textfield{
border-top:1px solid #dddddd;border-left:1px solid #dddddd;
border-right:1px solid #ffffff;border-bottom:1px solid #ffffff;
BACKGROUND-COLOR: #f5f5f5;line-height:18px;
width:240px;HEIGHT: 22px;
}
.SearchBar span.button{
BORDER: 1px outset #f0f0f0;
BACKGROUND-COLOR: #fafafa;
width:50px;HEIGHT: 20px;
padding:3px 3px 2px 3px;
cursor:hand;
}
-->
</style>
<script language="javascript">
<!--
function Data_Load(KeyWords,KeyField,regEXPType){
var myXmlPath="data.xml"; //设置xml文件路径
var myHolder=document.getElementById("insertdiv");
var myFoot=document.getElementById("footdiv");
var myTableID="Table_";
var myXmlDoc = new ActiveXObject("Microsoft.XMLDOM");
myXmlDoc.async="false";
myXmlDoc.load(myXmlPath);
var xmlObj=myXmlDoc.documentElement;
var myNodes = myXmlDoc.documentElement.childNodes;
var myCount=0;
var myPageSize=20;
var myPageIndex=1;
var myTable,myTr,myTd;
for (var i=0;i<myNodes.length;i++){
var myCheck=Data_Filter(KeyWords,myNodes(i).getAttribute(KeyField),regExpType);
if(myCheck==true){
myCount++;
if((myCount-1)==(myPageIndex-1)*myPageSize){
myTable=document.createElement("<table id='"+ myTableID + myPageIndex +"' style='display:none; width:100%;' border=0>");
myTable.className="mainTable";
myTr=myTable.insertRow();
myTr.className="Head"; //设置表头CSS
myTd=myTr.insertCell();
myTd.innerText="省份";
myTd=myTr.insertCell();
myTd.innerText="地区";
myTd=myTr.insertCell();
myTd.innerText="邮编";
myTd=myTr.insertCell();
myTd.innerText="区号";
}
myTr=myTable.insertRow();
myTd=myTr.insertCell();
myTr.className="Item"; //设置内容css
myTd.innerText=myNodes(i).getAttribute("Province");
myTd=myTr.insertCell();
myTd.innerText=myNodes(i).getAttribute("County");
myTd=myTr.insertCell();
myTd.innerText=myNodes(i).getAttribute("Zipcode");
myTd=myTr.insertCell();
myTd.innerText=myNodes(i).getAttribute("Areacode");
myTr.attachEvent("onmouSEOver",ItemOver);
myTr.attachEvent("onmouseout",ItemOut);
if(myCount==(myPageIndex)*myPageSize){
myHolder.appendChild(myTable); //增加表格
var mySpan=document.createElement("<span>");
mySpan.innerHTML=" <a href='#' onClick='Javacript:PageChange(\""+ myTableID + myPageIndex +"\")'>第"+myPageIndex+"页</a> ";
myFoot.appendChild(mySpan);
myPageIndex++;
}
}
}
if(myCount>0){
if(myCount>(myPageIndex-1)*myPageSize&&myCount!=myPageIndex*myPageSize){
myHolder.appendChild(myTable); //增加表格
var mySpan=document.createElement("<span>");
mySpan.innerHTML=" <a href='#' onClick='javacript:PageChange(\""+ myTableID + myPageIndex +"\")'>第"+myPageIndex+"页</a> ";
myFoot.appendChild(mySpan);
myPageIndex++;
}
var myInfo=document.createElement("<span>");
var myPageNum=(myPageIndex*myPageSize>myCount)?(myPageIndex-1):myPageIndex;
myInfo.innerHTML="共计【"+myCount+"】条信息,每页"+ myPageSize+"条,分"+myPageNum+"页显示。";
myFoot.appendChild(myInfo);
PageChange(myTableID +"1");
}else{
var myInfo=document.createElement("<span>");
myInfo.innerHTML=" 对不起,没找到任何相关数据...";
myFoot.appendChild(myInfo);
}
document.getElementById("Waiting").style.display="none";
}
function Data_Filter(inputWords,inputFieldValue,regExpType){
inputWords=inputWords.replace(/(^\s*)(\s*$)/g, "");
inputFieldValue=inputFieldValue.replace(/(^\s*)(\s*$)/g, "");
switch(regExpType){
case 0: //等于
if(inputWords==inputFieldValue){
return true;
}else{
return false;
}
break;
case 1: //包含
if(inputFieldValue.indexOf(inputWords)>-1){
return true;
}else{
return false;
}
break;
case 2: //以...开头
if(inputFieldValue.substring(0,inputWords.length)==inputWords){
return true;
}else{
return false;
}
break;
case 3: //以...结尾
if(inputFieldValue.substring(inputFieldValue.indexOf(inputWords),inputFieldValue.length)==inputWords){
return true;
}else{
return false;
}
break;
default: //等于
if(inputWords==inputFieldValue){
return true;
}else{
return false;
}
break;
}
return false;
}
function PageChange(showID){
var myHolder=document.getElementById("insertdiv");
for(var i=0;i<myHolder.childNodes.length; i++){
var myNode = myHolder.childNodes[i];
更多精彩
赞助商链接