1 Star 0 Fork 2

panwan1483/畅行吉林_hzs

forked from celticsv5/畅行吉林_hzs 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
subway___.html 17.96 KB
一键复制 编辑 原始数据 按行查看 历史
13601014569 提交于 2018-08-28 22:56 . 上传项目hzs就是我
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709
<!DOCTYPE html>
<html>
<head>
<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" />
<link rel="stylesheet" type="text/css" href="css/photoswipe.css" />
<link rel="stylesheet" type="text/css" href="css/default-skin.css" />
<style type="text/css">
* {
background-color: transparent;
}
img {
width: 100%;
}
/*body {
overflow-y: hidden;
}*/
.index_head {
background-color: #0070B4;
padding: 25px 20px;
position: static;
/*层级低于所有页面遮罩层*/
}
#subway_main {
max-width: 640px;
min-width: 320px;
width: 100%;
margin: 0px auto;
}
.app_head_left {
float: left;
width: 30%;
padding-top: 6px;
padding-left: 6px;
}
.app_head_left a {
color: #FFFFFF;
font-size: 1.5em;
font-weight: bold;
}
.app_head_mid {
float: left;
width: 40%;
padding-top: 5px;
}
#app_head_title {
text-align: center;
color: #FFFFFF;
font-size: 1.6em;
font-family: "宋体";
font-weight: bold;
}
.app_head_right {
float: right;
width: 30%;
text-align: right;
padding-right: 10px;
height: 30px;
}
.my-gallery {
width: 45px;
float: right;
position: relative;
left: 16px;
}
.weui-row {
width: 100%;
position: relative;
top: -3px;
border: 1px solid #DEDEDE;
}
.weui-row .weui-col-33 {
display: block;
height: 50px;
line-height: 48px;
background-color: #CCCCCC;
}
.weui-row .weui-col-33:nth-child(1) {
background-color: #FFFFFF;
}
.weui-row .weui-col-33:nth-child(1) img {
width: 37px;
}
.weui-row .weui-col-33 img {
width: 31px;
vertical-align: middle;
margin-right: 3px;
}
.weui-row .weui-col-33 b {
color: #FFFFFF;
font-size: 1.15em;
padding: 5px 0px;
}
/*--白色小竖线划分区域--*/
.weui-row .weui-col-33 label {
float: right;
font-size: 1.3em;
color: #FFFFFF;
position: relative;
left: 2px;
}
.subwayZz_mid {
padding: 10px;
padding-top: 30px;
}
.subwayZz_mid div {
width: 84%;
height: 50px;
border: 1px solid #DEDEDE;
border-radius: 8px;
margin-top: 30px !important;
margin: auto;
line-height: 48px;
position: relative;
left: 8px;
}
.subwayZz_mid div span {
display: block;
float: left;
color: #666666;
padding-left: 1em;
border: none;
width: 100%;
outline: none;
height: 90%;
font-size: 1.2em;
height: 35px;
margin-top: 7px;
line-height: 34px;
}
#startLineNub,
#endLineNub {
border-right: 1px solid #DEDEDE;
width: 49%;
}
#startSub,
#endSub {
/*border-left: 1px solid #DEDEDE;*/
width: 50%;
}
#connotsearch_zz {
display: block;
width: 40%;
height: 40px;
line-height: 40px;
color: #FFFFFF;
font-size: 1.3em;
text-align: center;
border-radius: 8px;
margin-top: 70px;
background-color: #CCCCCC;
}
#search_zz {
display: block;
width: 40%;
height: 40px;
line-height: 40px;
color: #FFFFFF;
font-size: 1.3em;
text-align: center;
border-radius: 8px;
margin-top: 70px;
background-color: #0070B4;
}
/*--互换起终点按钮--*/
/*#exchangeSubBtn img {
width: 27px;
position: relative;
top: 115px;
left: 20px;
}*/
/*----底部----*/
footer {
background-color: #DCDCDC;
max-width: 640px;
min-width: 320px;
margin: 0px auto;
}
footer li {
width: 50%;
}
footer li a {
border-right: 1px solid #B1B1B1;
height: 65%;
}
footer li:first-child a img {
width: 50px;
}
footer li:last-child a img {
width: 36px;
margin-top: 2px;
}
footer label {
color: #0070B4;
position: relative;
top: -13px;
font-size: 1.1em;
}
/*--关闭按钮--*/
.close-select {
color: #0070B4 !important;
}
/*--下拉框每行高度属性--*/
.weui_check_label {
height: 70px;
}
/*--车辆查询内容部分--*/
#subTrain_main {
max-width: 640px;
min-width: 320px;
width: 100%;
margin: 0px auto;
}
/*---遮罩层---*/
.opacity {
opacity: 0.7;
filter: alpha(opacity=30);
background-color: #000;
z-index: 99;
}
.mask {
position: fixed;
height: 100%;
width: 100%;
}
html,
body {
height: 100%;
}
/*----车站选择弹出层样式----*/
#full_ZzResult {
max-width: 640px;
min-width: 320px;
width: 100%;
margin: 0px auto;
overflow: hidden;
}
#subwayZz_tanchu {
height: 100%;
}
#closeBtn {
color: #FFFFFF;
font-size: 1.2em;
margin-top: -7px;
margin-right: 8px;
}
/*全屏弹出框*/
#subwayZz_tanchu .toolbar-inner {
height: 70px !important;
background-color: #333333;
padding: 25px 20px;
}
/*半屏弹出框*/
.toolbar-inner {
height: 55px !important;
background-color: #333333;
padding: 7px 20px;
}
.toolbar-inner h1 {
color: #FFFFFF !important;
}
.toolbar-inner a {
color: #00B9E8 !important;
}
.toolbar {
background-color: #FFFFFF;
height: 100%;
/*border: 10px solid;*/
background-image: url(img/subway/subwayBg.png);
background-size: 130%;
background-position: 0% 100%;
background-repeat: no-repeat;
z-index: 999999;
}
/*--查询结果区域样式--*/
#result_mid_1 {
text-align: center;
}
#result_mid_1 img {
width: 17%;
height: 30px;
vertical-align: middle;
margin: 15% 10%;
}
#result_mid_1 span {
font-size: 1.35em;
color: #666666;
}
.result_mid ul {
width: 50%;
margin-left: 29%;
height: 80%;
}
.result_mid li {
font-size: 1.3em;
color: #666666;
height: 90px;
line-height: 90px;
}
.result_mid li span {
color: #00B9E8;
font-weight: bold;
font-size: 1.35em;
}
</style>
</head>
<body ontouchstart>
<div class="mask opacity" id="opacityDiv" style="display: none;"></div>
<div id="subway_main">
<div class="index_head" id="firTitle">
<div class="app_head_left">
<a href="index01.html" class="iconfont">&#xe6d4;</a>
</div>
<div class="app_head_mid">
<p id="app_head_title">轨道交通</p>
</div>
<div class="app_head_right">
<div class="my-gallery" data-pswp-uid="1">
<figure>
<a href="img/subway/bigSubwayMap.jpg" data-size="770x812">
<img src="img/subway/subway_03.png" />
</a>
</figure>
</div>
</div>
</div>
<div class="weui-row weui-no-gutter tc">
<a class="weui-col-33">
<img src="img/subway/blueZhandian.png" /><b style="color: #0070B4;">站站查询</b>
</a>
<a class="weui-col-33" href="subway2.html">
<img src="img/subway/whiteZhanzhan.png" /><b>站点查询</b><label>|</label>
</a>
<a class="weui-col-33" href="subway3.html">
<img src="img/subway/whiteCheliang.png" /><b>车辆查询</b>
</a>
</div>
<div class="subwayZz_mid">
<!--<span id="exchangeSubBtn"><img src="img/subway/exchange_icon.png"/></span>-->
<div>
<span id="startLineNub">请选择线路</span>
<span id="startSub">请选择起点</span>
</div>
<div>
<span id="endLineNub">请选择线路</span>
<span id="endSub">请选择终点</span>
</div>
<a href="javascript:;" id="search_zz" style="display: none;" class="public-th open-popup" data-target="#full_ZzResult">查询</a>
<a href="javascript:;" id="connotsearch_zz">查询</a>
</div>
<!--<footer>
<li>
<a href="javascript:;">
<img src="img/subway/qingguiICONblue.png" />
<label>轻轨<label>
</a>
</li>
<li>
<a href="subway_ditie.html" style="border: none;">
<img src="img/subway/ditieICONblue.png" />
<label>地铁</label>
</a>
</li>
</footer>-->
<div id="full_ZzResult" class="weui-popup-container popup-bottom weui-popup-modal-visible">
<div class="weui-popup-overlay yinying" id="yinying"></div>
<div id="subwayZz_tanchu" class="weui-popup-modal">
<div class="toolbar">
<div class="toolbar-inner">
<div class="app_head_left">
<a href="javascript:;" class="picker-button close-popup" id="closeBtn">返回</a>
</div>
<div class="app_head_mid">
<p id="app_head_title">查询结果</p>
</div>
</div>
<!--<div class="bg-blur"></div>-->
<div class="result_mid">
<h2 id="result_mid_1">
<span id="subResult_start"></span>
<img src="img/subway/changjiantouSub2.png"/>
<span id="subResult_end"></span>
</h2>
<ul>
<li>全程:&nbsp;<span id="resultLong"></span>&nbsp;公里</li>
<li>票价:&nbsp;<span id="resultPrice"></span>&nbsp;</li>
<li>时长:&nbsp;<span id="resultTime"></span>&nbsp;分钟</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="1" role="dialog" aria-hidden="true">
<!-- Background of PhotoSwipe.
It's a separate element as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div>
<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">
<!-- Container that holds slides.
PhotoSwipe keeps only 3 of them in the DOM to save memory.
Don't modify these 3 pswp__item elements, data is added later on. -->
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<!-- element will get class pswp__preloader--active when preloader is running -->
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
<!--data-pswp-uid在每个相册中必须是唯一的,data-size指定放大时图片显示的宽和高-->
<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 src="js/photoswipe.js" type="text/javascript" charset="utf-8"></script>
<script src="js/photoswipe-ui-default.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bigPicResearch.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// $(function() {
// $("#search_zz").click();
// })
var l1;
var l2;
var s1;
var s2;
// $("#exchangeSubBtn").click(function() {
// if(l1 != "请选择线路" && l2 != "请选择线路" && s1 != "请选择起点" && s2 != "请选择终点"){
//
// }
// $("#startLineNub").html(l2);
// $("#endLineNub").html(l1);
// $("#startSub").html(s2);
// $("#endSub").html(s1);
// });
$(function(){
console.log(true);
});
function changeBtnCol() {
l1 = $("#startLineNub").html();
l2 = $("#endLineNub").html();
s1 = $("#startSub").html();
s2 = $("#endSub").html();
if(l1 != "请选择线路" && l2 != "请选择线路" && s1 != "请选择起点" && s2 != "请选择终点") {
$("#connotsearch_zz").hide();
$("#search_zz").show();
} else {
// alert(l1 + "--" + l2 + "--" + s1 + "--" + s2);
$("#search_zz").hide();
$("#connotsearch_zz").show();
}
}
function getArrAjax(d, t) {
var stopItems; //设置一个全局变量,将选择的线路所有站点以数组形式赋值
$.ajax({
type: "post",
url: Url,
data: {
"type": "rail_station_info",
"LINENAME": d.titles,
"RAILTYPE": d.values //1为轻轨(默认)2为地铁
},
async: false,
cache: false,
dataType: "jsonp", //数据类型为jsonp
jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
jsonpCallback: "jsonpCallback1",
success: function(data) {
console.log(data);
var allStr = "";
for(var i = 0; i < eval(data.DATA).length; i++) {
var startStopStr = '"title"' + ':' + '"' + eval(data.DATA)[i].STOP_NAME + '"';
// allStr+= ","+eval(data.DATA)[i].STOP_NAME;
allStr += ",{" + startStopStr + "}";
}
allStr = allStr.substr(1);
stopItems = JSON.parse('[' + allStr + ']');
//console.log(stopItems);
//点击起点站名框
$(t).select("update", {
title: "请选择起点",
items: stopItems,
onChange: function(d) {
//console.log(d.titles);
$(t).html(d.titles);
changeBtnCol();
},
onOpen: function() {
//弹窗打开时 显示遮罩层
$("#opacityDiv").show();
},
onClose: function() {
//弹窗关闭时 隐藏遮罩层
$("#opacityDiv").hide();
}
});
$(t).click();
},
error: function(data) {
$.alert("连接超时,请检查网络设置", "提示");
}
});
}
//选择起点的线路与站名
$("#startLineNub").select({
title: "请选择线路",
items: [{
title: "地铁1号线",
value: 2
}, {
title: "轻轨3号线",
value: 1
}, {
title: "轻轨4号线",
value: 1
}],
onChange: function(d) {
// console.log(d.values);
$("#startLineNub").html(d.titles);
//获取本条轻轨站点信息
getArrAjax(d, $("#startSub"));
changeBtnCol();
$("#startSub").html("请输入起点"); //选择线路过后,清空之前选择的站点名称
// changeSearchBtn();
},
onOpen: function() {
//弹窗打开时 显示遮罩层
$("#opacityDiv").show();
},
onClose: function() {
//弹窗关闭时 隐藏遮罩层
$("#opacityDiv").hide();
}
});
//选择终点的线路与站名
$("#endLineNub").select({
title: "请选择线路",
items: [{
title: "地铁1号线",
value: 2
}, {
title: "轻轨3号线",
value: 1
}, {
title: "轻轨4号线",
value: 1
}],
onChange: function(d) {
$("#endLineNub").html(d.titles);
getArrAjax(d, $("#endSub"));
changeBtnCol();
$("#endSub").html("请输入终点"); //选择线路过后,清空之前选择的站点名称
},
onOpen: function() {
//弹窗打开时 显示遮罩层
$("#opacityDiv").show();
},
onClose: function() {
//弹窗关闭时 隐藏遮罩层
$("#opacityDiv").hide();
}
});
//点击查询按钮
$("#search_zz").click(function() {
console.log(s1);
console.log(s2);
$.ajax({
//获取轻轨站站查询信息
type: "post",
url: Url,
data: {
"type": "rail_station_query_info",
"STARTSTATION": s1,
"ENDSTATION": s2
},
async: false,
cache: false,
dataType: "jsonp", //数据类型为jsonp
jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
jsonpCallback: "jsonpCallback1",
success: function(data) {
console.log(eval(data.DATA)[0].EXPECT_TIME);
var far = eval(data.DATA)[0].STOP_SPACING;
var price = eval(data.DATA)[0].STOP_PRICE;
var time = eval(data.DATA)[0].EXPECT_TIME;
$("#subResult_start").html(s1);
$("#subResult_end").html(s2);
$("#resultLong").html(far);
$("#resultPrice").html(price);
$("#resultTime").html(time);
},
error: function(data) {
$.alert("连接超时,请检查网络设置", "提示");
}
});
});
</script>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/panwan1483/jilin__hzs.git
git@gitee.com:panwan1483/jilin__hzs.git
panwan1483
jilin__hzs
畅行吉林_hzs
master

搜索帮助

0d507c66 1850385 C8b1a773 1850385