地铁路线——最短路径
今天对地铁查询系统如何做进行了讨论，知道如何在数据库中对数据进行存储，在数据库中建立两个表，一个表为站点表，表内为地铁的线路、姓名、序号、唯一标识，另一个表为中转表，表内存储中转点的信息，中转点的名称、第一个线路、第二个线路；起点到终点的最短线路用深度优先遍历。
`
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { border-radius: 10px; } hr { height: 1px; background-color: cornsilk; } h3 {
text-align: center;
color: cornsilk;
font-size: 30px;
}
.title {
float: left;
}
li {
list-style: none;
background-color: rgb(166, 183, 216);
width: 150px;
height: 50px;
font-size: 20px;
color: floralwhite;
line-height: 50px;
margin-left: -40px;
border-radius: 10px;
text-align: center;
}
.choose {
background-color: rgb(132, 195, 216);
/* border:1px solid rgb(99, 99, 206) ;添加边框以及颜色*/
}
.input1 {
min-width: 500px;
min-height: 55px;
/* top: 50%;/*处于居中的位置*/
background-color: cornsilk;
/* position: absolute;/*input表单处于居中的位置*/
font-size: 20px;
color: darkgreen;
/* margin-top: 50px;
/*调整距离让那个input表单放在合适的位置*/
margin-left: 100px;
border: none;
border-radius: 10px;
}
select {
min-width: 100px;
min-height: 55px;
background-color: cornsilk;
font-size: 20px;
color: darkgreen;
margin-top: 50px;
/*调整距离让那个input表单放在合适的位置*/
margin-left: 20px;
border-radius: 10px;
/*将边框改成圆角*/
}
.nav {
background-color:rgb(166, 183, 216);
box-sizing: border-box;
width: 1300px;
height: 600px;
margin: 100px auto;
}
.content {
background-color: rgb(132, 195, 216);
height: 600px;
}
/*下面是图中的额外按钮部分*/
.button1 {
min-width: 55px;
min-height: 55px;
margin-left: 40px;
margin-top: 50px;
background-image: url(images/th.jfif);
background-size: 100%;
/*调整图片的大小符合我们的尺寸*/
font-size: 20px;
color: darkgreen;
border: none;
/*边框为0*/
border-radius: 10px;
}
.all {
min-width: 55px;
min-height: 70px;
/* margin-top: 50px;*/
background-size: 80%;
/*调整图片的大小符合我们的尺寸*/
border: none;
/*边框为0*/
border-radius: 10px;
background-repeat: no-repeat;
background-position: top center;
color: darkgreen;
font-size: 16px;
height: 55px;
/*设置其中的文字靠下*/
line-height: 120px;
}
.map {
background-image: url(images/map.jfif);
margin-top: 50px;
margin-left: 300px;
}
.calinder {
min-width: 77px;
background-image: url(images/calinder.jfif);
margin-left: 210px;
}
.tolelt {
background-image: url(images/tolelt.jfif);
margin-left: 200px;
}
</style>
</div>
<div class="content">
<div style="display: block;">
<h3>线路查询</h3>
<hr>
<!--分割线-->
<input class="input1" type="text" value="请输入线路">
<select name="year" id="year">
<option value="">--请选择地铁线路--</option>
<option value="1号线" selected="selected">1号线</option>
<option value="2号线">2号线</option>
<option value="3号线">3号线</option>
<option value="4号线">4号线</option>
<option value="5号线">5号线</option>
</select>
<input class="button1" type="submit" value=""><br>
<button class="map all" id="but1" onclick="fnmap()">路线一览</button>
<button class="calinder all" id="but-calinder" onclick="fncalinder()"> 时刻表 </button>
<button class="tolelt all" id="but-tolet" onclick="fntolet()">站内设施</button>
<img src="images/ganjiang.jpg" style="margin-left: 400px; margin-top: -150px; display: none;" id="map" width="500px" height="300px" >
</div>
<div style="display: none;"></div>
<div style="display: none;"></div>
</div>
</div>
<script>
function fnmap() {
// 1.获取事件源
var but1 = document.getElementById("but1");
var img = document.getElementById("map")
// 3. 事件驱动程序
if (but1.innerHTML === "路线地图") {
img.style.display = "none";
but1.innerHTML = " 路线一览";
// isShow = false;
} else {
img.style.display = "block";
but1.innerHTML = "路线地图";
// isShow = true;
}
}
var lis=document.querySelector('ul').querySelectorAll('li');//所有的li标签作为一个数组
var divs=document.querySelector('.content').querySelectorAll('div');//素偶有的表单作为一个数组
for(var i=0;i<lis.length;i++){
lis[i].setAttribute('index',i);
lis[i].onclick=function(){
for(var i=0;i<lis.length;i++){
lis[i].className='';
}
this.className='choose';
var index=this.getAttribute('index');
for(var i=0;i<divs.length;i++){
divs[i].style.display='none';
}
divs[index].style.display='block';
}
}
</script>
