master

分支 (1)

管理

管理

master

jilin__hzs
/
railway.html

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>铁路客运</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/base.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
		<style type="text/css">
			#trian_main {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
			}

			.h55 {
				height: 55px;
			}

			.app_head_left {
				float: left;
				width: 10%;
				padding-left: 6px;
				padding-top: 6px;
			}

			.app_head_left a {
				color: #FFFFFF;
				font-size: 1.5em;
				font-weight: bold;
			}

			.app_head_mid {
				float: left;
				width: 80%;
				padding-top: 5px;
			}

			#app_head_title {
				text-align: center;
				width: 100%;
				color: #FFFFFF;
				font-size: 1.6em;
				font-family: "宋体";
				font-weight: bold;
			}

			s {
				width: 44px;
				height: 44px;
				display: inline-block;
				font-style: normal;
				vertical-align: middle;
				margin-bottom: 10px;
			}

			#railway_main {
				padding-top: 15px;
			}

			#railway_main .way-search {
				width: 100%;
				height: 70px;
				line-height: 70px;
				border-bottom: 1px solid #DEDEDE;
				text-align: center;
			}

			#railway_main .bgimg-o {
				width: 30%;
			}

			#railway_main .bgimg-o img {
				width: 24%;
				position: relative;
				top: -4px;
			}

			#railway_main .public-o {
				font-size: 1.4em;
				display: inline-block;
				padding-left: 10px;
			}

			#railway_main .public-t {
				color: #cccccc;
				font-size: 1.7em;
				margin-left: 20px;
			}

			#railway_main .public-th {
				color: #C0C0C0;
				font-size: 1.5em;
				width: 30%;
				border: none;
				text-align: center;
				outline: none;
				position: relative;
				left: 5px;
			}

			#trianSearchBtn {
				color: #FFFFFF;
				width: 50%;
				background-color: #0070B4;
				height: 40px;
				border-radius: 18px;
				text-align: center;
				line-height: 38px;
				font-size: 1.45em;
				margin-top: 100px !important;
				margin: 0 auto;
			}

			#trainMainTable {
				width: 96%;
			}

			#trainMainTable tr {
				height: 60px;
			}

			#trainMainTable tr td:nth-child(1) {
				width: 65%;
			}

			#trainMainTable tr td:nth-child(2) {
				width: 35%;
			}

			#trainMainTable td {
				border-bottom: 1px solid #DEDEDE;
			}

			.iconType {
				vertical-align: middle;
				width: 2.5em;
				margin-right: 8px;
				margin-left: 20px;
			}

			#trainMainTable tr td:first-child {
				font-size: 1.2em;
				color: #666666;
			}

			#dayVal {
				border: none;
				outline: none;
				font-size: 1.3em;
				margin-top: -5px;
				width: 100%;
			}

			#checkboxDiv {
				background-image: url(img/railway/checked.png);
				border: none;
				background-size: 100% 100%;
				width: 30px;
				height: 30px;
				border-radius: 30px;
			}

			.nochecked {
				background-image: none !important;
				border: 1px solid #DEDEDE !important;
			}
			/*----日历选中日期颜色----*/

			.picker-calendar-day-selected span {
				background-color: #0070B4 !important;
			}

			.icon-next {
				background-image: url(img/freeway/sanjiaoyou.png) !important;
				width: 1.8em !important;
			}

			.icon-prev {
				background-image: url(img/freeway/sanjiaozuo.png) !important;
				width: 1.8em !important;
			}

			.picker-calendar-next-year {
				display: none;
			}

			.picker-calendar-prev-year {
				display: none;
			}

			.current-year-value {
				position: relative;
				left: 50px;
				font-weight: bold;
				font-size: 1.4em;
				color: #0070B4;
			}

			.current-month-value {
				font-weight: bold;
				font-size: 1.4em;
				color: #0070B4;
			}
			/*----车站选择弹出层样式----*/

			#full {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
				overflow: hidden;
				z-index: 1000;
			}

			#station_tanchu {
				height: 100%;
				background-color: #E3E3E3;
			}

			#closeBtn i {
				color: #FFFFFF;
				font-size: 1.15em;
				position: relative;
				top: -6px;
				right: 8px;
			}

			.toolbar-inner {
				height: 70px !important;
			}

			.weui-row {
				background-color: #FFFFFF;
				margin-top: 15px;
			}

			.stationDiv {
				height: 50px;
				background-color: #DEDEDE;
				width: 100%;
				margin-top: 55px;
			}

			#stationInput {
				width: 96%;
				margin: 5px 2%;
				height: 40px;
				border-radius: 4px;
				border: none;
				outline: none;
				padding-left: 2.2em;
			}

			.stationUl {
				background-color: #FFFFFF;
				width: 100%;
			}

			.stationUl li {
				height: 40px;
				border-bottom: 1px solid #DEDEDE;
				width: 100%;
				line-height: 37px;
				padding-left: 2em;
			}

			.weui_tab {
				width: 100%;
			}
			/*----导航栏样式----*/

			.weui_bar_item_on {
				background-color: #FFFFFF !important;
				color: #0070B4 !important;
			}

			.weui_navbar_item {
				color: #FFFFFF;
				background-color: #CCCCCC;
			}

			.weui_navbar_item b {
				font-size: 1.1em;
				display: block;
				height: 1.3em;
				line-height: 1.2em;
			}

			#iframeResult {
				border: none;
				padding-top: 25px;
				height: 380px;
			}
			/*----放大镜样式----*/

			.icon_fdj {
				position: absolute;
				margin-top: 11px;
				margin-left: 15px;
				font-size: 1.4em;
			}

			.primary {
				color: #0070B4 !important;
				font-size: 1.1em;
			}

			.changjiantou {
				width: 32px;
				height: 15px;
				vertical-align: middle;
				margin: 0px 5px;
			}

			#railwayStationMsgBtn {
				color: #666666;
				height: 60px;
				line-height: 60px;
				margin-left: 27px;
				font-size: 1.13em;
			}

			#railwayStationMsgBtn img {
				vertical-align: middle;
				width: 38px;
			}
		</style>
	</head>

	<body ontouchstart>
		<div id="trian_main">
			<div class="index_head" id="firTitle">
				<div class="app_head_left">
					<a id="returnPrevPg" class="iconfont">&#xe6d4;</a>
				</div>
				<div class="app_head_mid">
					<p id="app_head_title">铁路客运</p>
				</div>
			</div>
			<div id="railway_main">
				<div class="h55"></div>
				<div class="way-search">
					<input type="text" value="长春" class="public-th open-popup" data-target="#full" id="startStation" />
					<s class="bgimg-o">
						<img src="img/img/images/Icon_01.png" id="exchangeIcon"/>
					</s>
					<input type="text" value="吉林" class="public-th open-popup" data-target="#full" id="endStation" />
				</div>
				<table border="0" cellspacing="0" cellpadding="0" id="trainMainTable">
					<tr>
						<td><img src="img/img/images/Icon_02.png" class="iconType" />出发日期</td>
						<td><input type="text" name="" id="dayVal" placeholder="请选择日期" data-toggle='date' /></td>
					</tr>
					<tr>
						<td><img src="img/img/images/Icon_04.png" class="iconType" />仅选择高铁/动车</td>
						<td>
							<div id="checkboxDiv" class="nochecked"></div>
						</td>
					</tr>
				</table>
				<a id="railwayStationMsgBtn" href="railway_station.html">
					<img src="img/railway/station_jilin.png" /> 去查询火车站信息
				</a>
				<div id="trianSearchBtn">查询</div>
			</div>

			<iframe id="iframeResult" width="100%" style="display: none;">

			</iframe>

			<div id="full" class="weui-popup-container popup-bottom weui-popup-modal-visible">
				<!--<div class="weui-popup-overlay yinying" id="yinying"></div>-->
				<div id="station_tanchu" class="weui-popup-modal">
					<div class="toolbar">
						<div class="toolbar-inner index_head">
							<div class="app_head_left">
								<a href="javascript:;" class="picker-button close-popup" id="closeBtn"><i class="iconfont">&#xe6d5;</i></a>
							</div>
							<div class="app_head_mid">
								<p id="app_head_title">车站选择</p>
							</div>
						</div>
						<div class="weui-row weui-no-gutter">
							<div class="stationDiv">
								<i class="iconfont icon_fdj">&#xe709;</i>
								<input type="text" onpaste="return false;" maxlength="10" id="stationInput" placeholder="请输入车站  中文/拼音首字母" />
							</div>
							<div class="weui_tab">
								<!--选择车站列表亦或吉林省内所有车站-->
								<div class="weui_navbar" id="stationNavbar">
									<a href="#stationList" id="a1" class="weui_navbar_item weui_bar_item_on">
										<b>车站列表</b>
									</a>
									<a href="#stationJilin" id="a2" class="weui_navbar_item">
										<b>省内车站</b>
									</a>
								</div>
								<div class="weui_tab_bd">
									<div id="stationList" class="weui_tab_bd_item weui_tab_bd_item_active">
										<ul class="stationUl" id="stationUl_1">
											<!--js添加Dom节点至此处li1-->
										</ul>
									</div>
									<div id="stationJilin" class="weui_tab_bd_item">
										<ul class="stationUl" id="stationUl_2">
											<!--js添加Dom节点至此处li2-->
										</ul>
									</div>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
		<!--铁路客运查询内容部分-->
		<script src="js/JL_city.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/stationJilin.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var whichInput;
			var gaotie;

			$(function() {
				var myDate = new Date();
				var y = myDate.getFullYear();
				var m = "";
				if(myDate.getMonth() + 1 > 9) {
					m = myDate.getMonth() + 1;
				} else {
					m = "0" + (myDate.getMonth() + 1);
				}
				var d = myDate.getDate();
				if(d < 10) {
					d = "0" + d
				}
				var todayDate = y + "-" + m + "-" + d;

				//				console.log(todayDate);
				$("#dayVal").val(todayDate);
			});
			$("#returnPrevPg").click(function() {
				if(document.getElementById("iframeResult").style.display == "none") {
					window.location.href = "index01.html";
				} else {
					document.getElementById("iframeResult").style.display = "none";
					$("#railway_main").show();
					$("#app_head_title").html("铁路客运");
				}
			});
			$("#exchangeIcon").click(function() {
				var startVal = $(this).parent().prev().val();
				var endVal = $(this).parent().next().val();
				$("#startStation").val(endVal);
				$("#endStation").val(startVal);
			});
			$("#checkboxDiv").click(function() {
				if(!$(this).hasClass("nochecked")) {
					$(this).addClass("nochecked");
					gaotie = ""
				} else {
					$(this).removeClass("nochecked");
					gaotie = "6";
				}
			});
			//初始化日历组件
			//计算可选择的最大日期和最小日期
			var myDate = new Date();
			var y = myDate.getFullYear();
			var m = myDate.getMonth() + 1;
			var d = myDate.getDate();
			var todayDate = y + "-" + m + "-" + d;

			myDate.setDate(myDate.getDate() + 30);
			var maxD = myDate.getFullYear() + "-" + (myDate.getMonth() + 1) + "-" + myDate.getDate();
			$("#dayVal").calendar({
				minDate: todayDate,
				maxDate: maxD
			});
			//点击查询按钮跳转
			$("#trianSearchBtn").click(function() {
				if($("#startStation").val() == $("#endStation").val()) {
					$.alert("起点和终点不能一致！", "输入有误");
				} else {
					$("#railway_main").hide();
					//iframe外部
					document.getElementById("iframeResult").style.display = "block";
					var allHeight = document.documentElement.clientHeight;
					$("#iframeResult").height(allHeight - 27);
					//iframe内部
					$("#app_head_title").html($("#startStation").val() + "<img class='changjiantou' src='img/railway/changjiantou.png' />" + $("#endStation").val());
					$("#iframeResult").attr("src", "http://touch.train.qunar.com/trainList.html?startStation=" + $("#startStation").val() + "&endStation=" + $("#endStation").val() +
						"&date=" + $("#dayVal").val() + "&searchType=stasta&bd_source=qunar&filterTrainType=" + gaotie);
				}
				//				var a =$("#iframeResult").contents(HTMLBodyElement).context.body;
				//				console.log(a);
				a = $(window.frames["iframeResult"].document).find("div[class='yo-tab']").html();
				console.log(a);
				//				filterbtm yo-tab
			}); //为起终点赋值的方法

			function chooseStation(t, whichInput) {
				if(whichInput == 0) {
					//					console.log("左边");
					document.getElementById("startStation").value = t.innerHTML;
					$("#closeBtn").click();
				} else if(whichInput == 1) {
					//					console.log("右边");
					document.getElementById("endStation").value = t.innerHTML;
					$("#closeBtn").click();
				}
			}
			$(".public-th").click(function() {
				$(this).focus();
				$(this).select();
				$(this).blur();
				$("#stationInput").val("");
				if(this == document.getElementById("startStation")) {
					whichInput = 0;
					appendElementInUl("", "");
					for(var j = 0; j < stationJilin.length; j++) {
						var li2 = $('<li onclick="chooseStation(this,whichInput)">' + stationJilin[j] + '</li>');
						$("#stationUl_2").append(li2);
					}
				} else if(this == document.getElementById("endStation")) {
					whichInput = 1;
					appendElementInUl("", "");
					for(var j = 0; j < stationJilin.length; j++) {
						var li2 = $('<li onclick="chooseStation(this,whichInput)">' + stationJilin[j] + '</li>');
						$("#stationUl_2").append(li2);
					}
				}
			});
			//			$("#iframeResult").load(function(){
			//
			//			});
			function appendElementInUl(stationVal, keyupVal) {
				$("#stationUl_1").children().remove();
				$.ajax({
					type: "post",
					url: Url + "?type=train_info&FIELDNAME=" + stationVal + "&FIELDVALUE=" + keyupVal,
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						//						console.log(data);
						for(var i = 0; i < data.length; i++) {
							var li1 = $('<li onclick="chooseStation(this,whichInput)">' + data[i].name + '</li>');
							$("#stationUl_1").append(li1);
						}
					},
					error: function(data) {
						//						console.log("啊"+data);
					}
				});

			}

			$("#stationInput").focus(function() {
				$("#a2").removeClass("weui_bar_item_on");
				$("#a1").addClass("weui_bar_item_on");
				$("#stationList").addClass("weui_tab_bd_item_active");
				$("#stationJilin").removeClass("weui_tab_bd_item_active");
			}).keyup(function() {
				var val = this.value;

				if(val == "") {
					setTimeout("appendElementInUl('', '')", 500);
				} else {
					//输入中文
					var reg1 = /^[\u2E80-\u9FFF]+$/;
					if(reg1.test(val)) {
						setTimeout("appendElementInUl('NAME', '" + val + "')", 500);
					}
					var reg2 = /^[a-zA-Z]+$/;
					if(reg2.test(val)) {
						setTimeout("appendElementInUl('PINYIN', '" + val + "')", 500);
					}
				}
			});
		</script>
	</body>

</html>