<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
}
.tatle{width: 300px;height: 50px;background: #ccc;}
.show{width: 300px;height: 400px;border:1px solid #ccc;overflow: scroll;}
.tatle span{
display: inline-block;
width:20px;height: 20px;line-height: 20px;text-align: center;
}
h4{
width: 70px;
float:left;
}
.hot{
width: 300px;
height: 50px;border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="hot" class="hot"></div>
<div id="tatle" class="tatle"></div>
<div id="show" class="show"></div>
<script>
function $(id){
return document.getElementById(id);
}
var tat=$("tatle");
var show=$("show");
var hot=$("hot");
var spans=tat.getElementsByTagName("span");
for(var i=65;i<=90;i++){ //字母对应码值循环
var spant= document.createElement("span");//创建节点放字母
spant.innerHTML=String.fromCharCode(i);//码值转字符显示
tat.appendChild(spant);//节点插入tat
}

try{var http=new XMLHttpRequest;}
catch(e){http=new ActiveXObject("Microsoft.XMLHTTP");}
http.open("GET","city.json",true);//服务器与JSON文件建立连接
http.send();//发送请求

http.onreadystatechange=function(){
//存储函数 每当readyState属性改变时就会调用
if(this.readyState==4 && this.status==200){//判断是否完成响应且正常
var p=JSON.parse(this.responseText);//字符串转为对象赋值给p

for(var r=0;r<p.hotList.length;r++){//热门城市遍历输出
hot.innerHTML+="<h4>"+p.hotList[r][0]+"<h4>";
}
}
for(var j=0;j<spans.length;j++){//装字母的容器遍历
spans[j].onclick=function(){//点击字母
show.innerHTML="";
for(var i=0;i<p.cityList.length;i++){
if(p.cityList[i][1].charAt(0).toUpperCase()==this.innerHTML){
//获取cityList[i][1]的首字母转大写
show.innerHTML+="<p>"+p.cityList[i][0]+"</p>";//显示其对应城市
}
}
}
}
var hotcity=hot.getElementsByTagName("h4");
for(var y=0;y<hotcity.length;y++){
//遍历热门城市的容器
hotcity[y].onclick=function(){
show.innerHTML="";
for(var i=0;i<p.cityList.length;i++){
if(p.cityList[i][0].substr(0,2)==this.innerHTML.substr(0,2)){
//获取热门城市名,前两个字匹配
//substr(start,length) start:抽取的子串的起始下标,length:子串中的字符数
show.innerHTML+="<p>"+p.cityList[i][0]+"</p>";
//显示其匹配结果一样的站点
}
}
}
}

}
</script>

</body>
</html>

JSON文件：(部分省略)

{
"cityList":[
                ["北京东","beijingdong","bjd",1],
                ["北京","beijing","bj",15],
                ["北京南","beijingnan","bjn",3],
                ["北京西","beijingxi","bjx",4],
                ["广州南","guangzhounan","gzn",5],
                ["重庆北","chongqingbei","cqb",6],
                ["重庆","chongqing","cq"],
                ["重庆南","chongqingnan","cqn"],
                ["广州东","guangzhoudong","gzd"],
                ["上海","shanghai","sh"],
                ["上海南","shanghainan","shn"],
                ["上海虹桥","shanghaihongqiao","shhq"],
                ["上海西","shanghaixi","shx"],

]

"hotList":[
                ["北京","beijing","bj"],
                ["上海","shanghai","sh"],
                ["广州","guangzhou","gz"],
                ["长沙","changsha","cs"],
                ["石家庄","shijiazhuang","sjz"],
                ["南京","nanjing","nj"],
                ["郑州","zhengzhou","zz"],
                ["深圳","shenzhen", "sz"]
             ]
}

火车站点城市查询（appserv 服务器练习）的更多相关文章

  1. Windows Server 2016-域站点复制查询

    了解了有关站点复制概念性内容后,后续几章节我们会围绕站点复制相关内容对域控的日常复制.维护等进行简单介绍.本章为大家带来有关域控站点复制查询的相关内容,希望大家可以喜欢.站点内域控制器之间的复制拓扑由 ...

  2. Python大法之从火车余票查询到打造抢Supreme神器

    本文作者:i春秋作家——阿甫哥哥 系列文章专辑:https://bbs.ichunqiu.com/forum.php?mod=collection&action=view&ctid=9 ...

  3. NET Core站点部署到Linux服务器

    .NET跨平台之旅:将QPS 100左右的ASP.NET Core站点部署到Linux服务器上 今天下午我们将生产环境中一个单台服务器 QPS(每秒请求数)在100左右的 ASP.NET Core 站 ...

  4. sitecore8.2 基于站点来查询item

    树形结构: /sitecore /content /foo-site /home /my-account /bar-site /home /my-account /baz-site /home /my ...

  5. 查询linux服务器有哪些IP在连接

    查询linux服务器有哪些IP在连接 netstat -ntu | awk '{print $5}' | cut -d: -f1 | sort | uniq -c | sort -n 查看linux的 ...

  6. .NET跨平台之旅：将QPS 100左右的ASP.NET Core站点部署到Linux服务器上

    今天下午我们将生产环境中一个单台服务器 QPS(每秒请求数)在100左右的 ASP.NET Core 站点部署到了 Linux 服务器上,这是我们解决了在 .NET Core 上使用 EnyimMem ...

  7. WAP站点(IIS/Apache)的服务器设置

    Server 端的设置IIS服务器:为了使IIS支持WAP(WML)页面的发布,在IIS的Web站点的属性 / HTTP信息中设置WAP的MIME属性,添加如下的MIME类型:扩展名 内容类型(MIM ...

  8. Sql Server 简单查询 异步服务器更新语句

    //结构:select 子句 [into 子句] from 子句  [where 子句] [group by 子句]  [having 子句] [order by 子句] select  dept_c ...

  9. SQL Server:查询当前服务器有多少连接请求

    有时DBA需要检查当前服务器有多少连接请求,以及连接请求的登录名,客户端版本,主机名,程序名等等之类的信息,我们就可以对服务器的连接状况有所了解,防止不明用户使用. SQL Server本身提供了这么 ...

随机推荐

  1. 用json传值时，最后一个不加逗号

    <javascript> $('.obj').css( 'position':'relative', 'top':'100px', 'left':'100px' ); </javas ...

  2. 通过JS将BSAE64生成图片并下载

    HTML:<div style="display:block;margin:0 auto;width:638px;height:795px;"><div id=& ...

  3. MellPlayer, 基于网易云歌单的命令行播放器

    MellPlayer 前言 我写代码时非常喜欢听音乐,最近在网易云歌单中听到了许多入耳惊艳的歌,觉得非常不错.但是歌单的随机播放以及快速切换是个软肋,于是开发了MellPlayer,可以按照分类随机听 ...

  4. HTTP 返回状态代码详解

    1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码. 100(继续)请求者应当继续提出请求. 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分:101(切换协议)请求者已要求服 ...

  5. 2005: [Noi2010]能量采集

    2005: [Noi2010]能量采集 Time Limit: 10 Sec  Memory Limit: 552 MBSubmit: 1831  Solved: 1086[Submit][Statu ...

  6. iOS10构建版本不显示的问题

    iOS10,构建版本问题: 在Xcode中->product->archive,进行相关操作后,upload后没有报错验证也成功的情况下,在开发者账号构建版本号里面迟迟没有显示的原因: i ...

  7. shiro权限控制

    1.1  简介 Apache Shiro是Java的一个安全框架.目前,使用Apache Shiro的人越来越多,因为它相当简单,对比Spring Security,可能没有Spring Securi ...

  8. Android 增加（键盘）按键

    以添加 camera按键为例(红色是需要添加的) 一.kernel键值定义 (1)键扫描码 ScanCode是由linux的Input驱动框架定义的整数类型,可参考input.h头文件,即geteve ...

  9. java初学第二章

    这两天学习了基本的数据类型还有运算符. 分享一下学习过程还有写作~ 数据类型分为基本数据类型还有引用数据类型,基本数据类型有4类8种: 整型: byte,short,int,long 浮点型:floa ...

  10. Python之路-python介绍

    一.Python及其他语言 有很多种分类方法,其中一种是按照解释型和编译型来划分的. 编译型:例如C,C++ 优点:运行效率高 缺点:依赖编译平台 (不能跨平台,开发效率低) 解释型:例如shell, ...