程序博客网 > 淘宝心级怎么算买家

jQuery和jquerymobile 实现火车票查询

来源：互联网 发布：淘宝心级怎么算买家 编辑：程序博客网 时间：2024/04/30 14:11

第一次写HTML的博客，说的不对的地方可以指出，好改正。首先到官网去下载下样式和js 文件，jquery_mobile  主要是用来显示界面的框架，

界面效果













导入的js  和css  文件









<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <script type="text/javascript" src="js/jquery.min.js" ></script>
    <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js" ></script>
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
    <link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="css/Bootstrap.min.css" />
</head>
<body>
<div data-role="page">
    <div data-role="header">
  <a href="index.html" data-icon="delete">Cancel</a>
    <h1>火车时刻表查询</h1>
  <a href="index.html" data-icon="check" data-theme="b">Save</a>
     </div>
     <div data-role="content"> 
     
      <div data-role="fieldcontain"> 
      <label for="name">发车站</label>    
      <input type="text" name="name" id="fache" value=""  />
      </div>
         <div data-role="fieldcontain"> 
      <label for="name">终点站</label>    
      <input type="text" name="name" id="zhongdian" value=""  />
      </div>
      <div data-role="fieldcontain"> 
      <label for="name">车次</label>    
      <input type="text" name="name" id="checi" value=""  />
      </div>
    <a href="##" data-transition = "slideup" id="chaxun"  data-role="button" data-theme="f" );>确认查询</a>   
</div> 
     
   <ul data-role="listview" data-inset="true" id="listview" >

   </ul>


     

         

       底部导航
     
     <div data-role="footer" data-position="fixed">
    <div data-role="navbar" data-iconpos="bottom"> 
    <ul>
    <li><a href="#" data-icon="grid">查询</a></li>
    <li><a href="#" data-icon="star" class="ui-btn-active">我的</a></li>
    <li><a href="#" data-icon="gear">设置</a></li>
    </ul>
    </div><!-- /navbar -->
    </div><!-- /footer -->  
</div>




<!--详情-->
<div data-role="page" id="detailPage">
<div data-role="header" data-position="inline" data-theme = "b">
　       <a href="index.html" data-icon="back">Cancel</a>
　      <h1 id="train_no">次</h1>
    </div>
   
  <div class="ui-grid-b" id="per">
<div class="ui-block-a">
<div class="ui-bar ui-bar-d" >站点</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-d" >倒点</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-d" >开点</div>
</div>


</div>
</div>
<script>
    $(function(){
    $("#chaxun").click(function(){
if($("#fache").val() && $("#zhongdian").val()||$("#checi").val()){    //点击查询的时候
if($("#checi").val()){
var n = $("#checi").val();

                                          //获取网络数据
$.getJSON("http://apis.juhe.cn/train/s?name="+n+"&key=92981a193f8af34cb40921a91eb72167"+"&callback=?", function(data,type){ 
   console.log(data.result);
   var a=data.result.train_info.name;
   console.log(data.result.station_list);

       for(var j=0;j<data.result.station_list.length;j++){
    var station_name=data.result.station_list[j].station_name; 
    var arrived_time =data.result.station_list[j].arrived_time;
    var leave_time=data.result.station_list[j].leave_time;   //最开始的时间
     
    $("#per").append("<div class='ui-block-a'><div class='ui-bar ui-bar-d'>"+station_name+"</div>")
    $("#per").append("<div class='ui-block-b'><div class='ui-bar ui-bar-d'>"+arrived_time +"</div>")
     $("#per").append("<div class='ui-block-c'><div class='ui-bar ui-bar-d'>"+leave_time+"</div></div>")       
      }
        $("#train_no").html(a+"次")
   });
   
   $.mobile.changePage("#detailPage");   
}else{
           var start = $("#fache").val();
       var end = $("#zhongdian").val();
       
       console.log(start);
       console.log(end);
   $.getJSON("http://apis.juhe.cn/train/s2s?start=" +start+"&end="+ end+"&key=92981a193f8af34cb40921a91eb72167"+"&callback=?", function(data,type){ 
        console.log(data.result.data);
 for(var i=0;i<data.result.data.length;i++){
var trainOpp=data.result.data[i].trainOpp;
var start_staion =data.result.data[i].start_staion;
var end_station =data.result.data[i].end_station;
var leave_time =data.result.data[i].leave_time;
var arrived_time =data.result.data[i].arrived_time;
var ys ="用时：5时45";
$("#listview").append("<li><h3><a href=''>"+trainOpp+"</a><h3>"
+"<p><strong>"+start_staion+"--"+end_station+"</strong></p>"
+"<p>"+ys+"</p>"
+"<p class='ui-li-aside'><strong>"+leave_time+"--"+arrived_time+"</strong></p></li>")
$( "#listview" ).listview( "refresh" );

      }
   });
}
}else{

alert("输入错误")
}
    });
   
        $(document).on('vclick','#listview li a', function(){
        var  t=$(this).text();
       
        $("#train_no").html(t+"次")      
         
              
$.getJSON("http://apis.juhe.cn/train/s?name="+t+"&key=92981a193f8af34cb40921a91eb72167"+"&callback=?", function(data,type){ 
   console.log(data);
var a=data.result.train_info.name;
   console.log(data.result.station_list);

       for(var j=0;j<data.result.station_list.length;j++){
    var station_name=data.result.station_list[j].station_name; 
    var arrived_time =data.result.station_list[j].arrived_time;
    var leave_time=data.result.station_list[j].leave_time;   //最开始的时间
     
    $("#per").append("<div class='ui-block-a'><div class='ui-bar ui-bar-d'>"+station_name+"</div>")
    $("#per").append("<div class='ui-block-b'><div class='ui-bar ui-bar-d'>"+arrived_time +"</div>")
     $("#per").append("<div class='ui-block-c'><div class='ui-bar ui-bar-d'>"+leave_time+"</div></div>")       
      }
       
  });                
         $.mobile.changePage("#detailPage"); 
       
       })
   
    });




 

</script>
</body>
</html>






//详情页面



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
    <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js" ></script>
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
    <link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="css/Bootstrap.min.css" />
</head>
<body>
<div data-role="page" id="detailPage">
<div data-role="header" data-position="inline" data-theme = "b">
　       <a href="index.html" data-icon="back">Cancel</a>
　      <h1>次</h1>
    </div>
   
  <div class="ui-grid-b">
<div class="ui-block-a">
<div class="ui-bar ui-bar-d" >站点</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-d" >倒点</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-d" >开点</div>
</div>

<div class="ui-block-a">
<div class="ui-bar ui-bar-e" >北京南</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-e" >-：-</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-e" >8:50</div>
</div>

</div>
</div>
</body>
</html>


项目源码：http://download.csdn.net/detail/pigseesunset/9724751

0 0
淘宝心级怎么算买家 淘宝心级怎么算买家
原创粉丝点击
热门IT博客
unity 删除数组unity 删除数组
手机网络捕鱼作弊器手机网络捕鱼作弊器
MAC maven安装配置
欧洲文明史 知乎
知画生孩子是第几集
淘宝怎么买百度云盘
ubuntu命令模式
汽车数码大师3软件
四川广电网络如何
ubuntu google输入法
交大知行大厦8层
软件做成启动项
爱奇艺去广告优化版
蚌埠学院网络教学平台
2345好压mac版
餐饮取名软件
authorware软件下载
网络是否稳定怎么测试
济南编程培训
apm地面站软件
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 蔚蓝天空 蔚蓝卡地亚 蔚蓝之美 迷失蔚蓝 蔚蓝的天空 蔚蓝深海 蔚蓝海边 蔚蓝书店 蔚蓝es6 那片蔚蓝 蔚蓝计划 蔚蓝海 蔚蓝的海 蔚蓝国际 蔚蓝的意思 蔚蓝的拼音 香奈儿蔚蓝男士淡香水 蔚蓝的随身空间 蔚蓝生物股吧 情深不予海蔚蓝 大众蔚蓝旅行版 我心蔚蓝超清免费观看 蔚蓝海边图片 蔚蓝之美属于什么档次 情深不予海蔚蓝免费阅读 我心蔚蓝在线 尉蓝 蔚蔚 大众旅行车蔚领 蔚车 蔚揽是什么车 大众蔚领裸车多少钱 蔚来车价格 大众进口蔚揽旅行车 蔚领旅行车 青梅熟了有点甜 蔚青初 中蔚 蔚迟林嘉 大众蔚领报价图片 蔚领2018款 蔚领怎么样

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里