222wan

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

地铁路线——最短路径

今天对地铁查询系统如何做进行了讨论，知道如何在数据库中对数据进行存储，在数据库中建立两个表，一个表为站点表，表内为地铁的线路、姓名、序号、唯一标识，另一个表为中转表，表内存储中转点的信息，中转点的名称、第一个线路、第二个线路；起点到终点的最短线路用深度优先遍历。

`

<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>
</head> <body> <div class="nav"> <div class="title"> <ul> <li class="choose">地铁线路</li> <li>站点查询</li> <li> 中转点查询</li> </ul> 
    </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>
</body> `

posted on   角落的蘑菇  阅读(34)  评论(0)  编辑  收藏  举报

相关博文：
· 地铁线路——页面
· HTML-学成在线
· 地铁查询系统团队进度(三)
· 3月21日每日总结
· 每日总结15
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示