<!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. Zookeeper与Kafka集群搭建

    一 :环境准备: 物理机window7 64位 vmware 3个虚拟机 centos6.8  IP为:192.168.17.［129 -131］ JDK1.7安装配置 各虚拟机之间配置免密登录 安装 ...

  2. .NET 三层架构

    三层架构简介: 三层架构(3-tier architecture) 通常意义上的三层架构就是将整个业务应用划分为:界面层(User Interface layer).业务逻辑层(Business Lo ...

  3. 3DES 加密 解密

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #c91b13 } p.p2 { margin: 0.0px 0. ...

  4. 【Spring】使用Spring和AMQP发送接收消息（中）

    上篇讲了RabbitMQ连接工厂的作用是用来创建RabbitMQ的连接,本篇就来讲讲RabbitMQ的发送消息.通过RabbitMQ发送消息最简单的方式就是将connectionFactory Bea ...

  5. ios 个推推送集成

    个推推送总结: 个推第三方平台官网地址:http://www.getui.com/cn/index.html 首先去官网注册账号,创建应用,应用的配置信息,创建APNs推送证书上传 P12证书(开发对 ...

  6. StudyJams学习历程总结

    Study Jams 是一个学习 Google 在线课程的活动.该活动由学员自发组建课程学习小组,旨在带领小组成员入门 Android 开发,最终将 Android App 上载至 Google Pl ...

  7. 说说JAVA之网络编程 - 爬虫

    首先总结一下学习过程中所需要的类: URL类 - openConnection() URLConnection类 - connection() getInputStream() BufferedRea ...

  8. 5种方法推导Normal Equation

    引言: Normal Equation 是最基础的最小二乘方法.在Andrew Ng的课程中给出了矩阵推到形式,本文将重点提供几种推导方式以便于全方位帮助Machine Learning用户学习. N ...

  9. 豆瓣电影Top250基本信息抓取

    豆瓣电影Top250基本信息抓取 最近想看电影,但是想看一些有营养的,所以就去豆瓣上看电影评分,但是豆瓣上的评分没有排序,所以就用python把网站内容爬下来了,然后按评分做了排序.具体代码参见git ...

  10. vs2012 asp调试设置 清单目录

    在web.cong中添加 <system.webServer> <directoryBrowse enabled="true" /> </system ...