nizongfeng
/
ZZWX


			
							<html>
<head>
	<title>选择日期班次</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="stylesheet" type="text/css" href="../css/home.css" />
	<link rel="stylesheet" type="text/css" href="../css/reserve_one.css" />
	<style>
		#div_date_run {position:absolute;top:0px;left:0px;width:100%;background:#ffffff;z-index:999;}
		#div_date_run_title {position:relative;float:left;width:100%;height:30px;text-align:center;line-height:30px;}
		#div_date_run_date {position:relative;float:left;width:100%;height:30px;text-align:center;line-height:30px;}
		#div_date_run_date span {display:block;}
		.span_move_month {position:relative;float:left;width:20%;cursor:pointer;}
		#span_now_month {position:relative;float:left;width:60%;cursor:default;}
		#div_date_calendar {position:relative;float:left;margin:0px 0px 0px 0px;text-align:center;overflow:hidden;width:100%;height:200px;}
		#div_date_calendar1 {position:absolute;left:50%;top:0px;width:393px;margin-left:-196px;background:#000000;overflow:hidden;padding:0px 0px 1px 0px;}
		#div_date_calendar1 span {display:block;}
		.span_calendar_title {position:relative;float:left;width:55px;height:25px;line-height:25px;margin:1px 0px 0px 1px;background:#ffffff;}
		.span_calendar_blank {position:relative;float:left;width:55px;height:25px;line-height:25px;margin:1px 0px 0px 1px;background:#ffffff;}
		.span_calendar_disable {position:relative;float:left;width:55px;height:25px;line-height:25px;margin:1px 0px 0px 1px;background:#cccccc;color:#aaaaaa;line-height:25px;text-align:center;}
		.span_calendar_enable {position:relative;float:left;width:55px;height:25px;line-height:25px;margin:1px 0px 0px 1px;background:#cccccc;color:#000000;font-weight:600;line-height:25px;text-align:center;}
	</style>
	<!-- 百度统计star -->
	<script>
		var _hmt = _hmt || [];
		(function() {
			var hm = document.createElement("script");
			hm.src = "//hm.baidu.com/hm.js?3d4ede42cef05a99fcd8bda849831ada";
			var s = document.getElementsByTagName("script")[0]; 
			s.parentNode.insertBefore(hm, s);
		})();
	</script>


	<!-- 百度统计end -->
</head>
<body>
	<div id="book_one" class="wrapper" style="display: block;">
		<div class="header">
			<img class="left_img" src="../img/back.png" ></img>
			<a href="javascript:window.opener=null;window.open('','_self');window.close();" >返回</a>
			蜘蛛出行
			<img class="right_img" src="../img/more.png" ></img>
		</div>
		<div class="content" style="padding-top: 2%;">
			<div class="go_back_layout">
				<div class="left_layout">
					<div style="position: relative; width: 100%;">
						<img class="start_img", src="../img/start.png" ></img>
						<p class="reserve_float" style=" font-size: 15px;">上海</p>
						<p class="reserve_float" style="margin-left: 30%; font-size: 15px;">4.15</p>
						<p class="reserve_float" style="margin-left: 1%; font-size: 15px;">07:30</p>
						<p class="reserve_float" style="margin-left: 1%; font-size: 15px;">出发</p>
						<br />
					</div>
					<div style="position: relative; margin-top: 15px; margin-bottom: 10px;">
						<hr class="reserve_hr" />
					</div>
					<div style="position: relative;">
						<img class="end_img", src="../img/end.png"></img>
						<p class="reserve_float" style="font-size: 15px;">上海</p>
						<p class="reserve_float" style="margin-left: 30%; font-size: 15px;">4.15</p>
						<p class="reserve_float" style="margin-left: 1%; font-size: 15px;">07:30</p>
						<p class="reserve_float" style="margin-left: 1%; font-size: 15px;">返回</p>
						<br />
					</div>
				</div>
				<div class="right_layout" style="margin-top: 10px;">
					<img src="../img/go_back.png" ></img>
				</div>
			</div>
			<div style="position: relative; width: 100%; margin-top: 15px; padding-left: 1%;">
				<p style="float: left; margin-left 1%; font-size: 15px;">佛教圣地祈福休闲二日游两天一晚 景区住宿</p>
				<a style="float: left; margin-left: 1%;" class="button green">2日</a>
				<br />
				<br />
			</div>
			<div style="position: relative; width: 100%; margin-top: 10px; padding-left: 1%;">
				<img style="float: left;" src="../img/car.png"/>
				<img style="float: left; margin-left: 1%;" src="../img/phone.png"/>
				<a style="float: right;  margin-top: 8px; margin-right: 1%; color: #FE7966;">购票须知</a>
				<img style="float: right; margin-right: 1%;" src="../img/book.png"/>
				<br />
				<br />
			</div>
			<div style="position: relative; width: 100%;">
				<hr class="reserve_hr_2" />
				<hr class="reserve_hr_2" />
			</div>
			<div style="position: relative; width: 100%; height: 60px; text-align: center; line-height: 60px;">
				<p style="float: left; margin-left: 1%; font-size: 20px;">出行时间:</p>
				<img style="float: right; margin-right: 1%; margin-top: 15px;" src="../img/right_arrow.png"/>
				<a onclick="go_date()" style="float: right; font-size: 20px;">选择时间</a>
			</div>
			<div style="position: relative; width: 100%;">
				<hr class="reserve_hr_2" />
				<hr id="back_line1" class="reserve_hr_2" style="display: none;"/>
			</div>
			<div id="back_ticket" style="position: relative; width: 100%; height: auto; display: none;">
				<div style="position: relative; width: 100%;">
					<p style="float: left; margin-top: 20px; margin-left: 1%; font-size: 20px;">数量:</p>
					<p style="float: left; margin-top: 20px; margin-left: 10%; font-size: 20px;">二日往返车票（成人）</p>
					<br />
				</div>
				<div style="position: relative; width: 100%; margin-top: 40px;" >
					<p style=" float: left; margin-left: 15%; font-size: 20px;">￥  500</p>
					<p style=" float: left; margin-left: 20%; font-size: 20px;">充足</p>
					<a style="float: right; padding: 5px 10px 5px 10px; border: 1px solid #EBEBEB; margin-right: 1%;">-</a>
					<a style="float: right; padding: 5px 10px 5px 10px; border-bottom: 1px solid #EBEBEB; border-top: 1px solid #EBEBEB;">0</a>
					<a style="float: right; padding: 5px 10px 5px 10px; border: 1px solid #EBEBEB;">+</a>
				</div>
				<div style="position: relative; width: 100%; margin-top: 70px;">
					<p style="float: left; margin-top: 20px; margin-left: 15%; font-size: 20px;">二日往返车票（儿童）</p>
					<br />
				</div>
				<div style="position: relative; width: 100%; margin-top: 40px;" >
					<p style=" float: left; margin-left: 15%; font-size: 20px;">￥  500</p>
					<p style=" float: left; margin-left: 20%; font-size: 20px;">充足</p>
					<a style="float: right; padding: 5px 10px 5px 10px; border: 1px solid #EBEBEB; margin-right: 1%;">-</a>
					<a style="float: right; padding: 5px 10px 5px 10px; border-bottom: 1px solid #EBEBEB; border-top: 1px solid #EBEBEB;">0</a>
					<a style="float: right; padding: 5px 10px 5px 10px; border: 1px solid #EBEBEB;">+</a>
				</div>
			</div>
			<div id="back_line2" style="position: relative; width: 100%; display: none;">
				<hr class="reserve_hr_2" style="margin-top: 100px;"/>
				<hr id="back_line3_ex" class="reserve_hr_2" />
			</div>
			<div id="linkman1" style="position: relative; width: 100%; height: 60px; text-align: center; line-height: 60px;">
				<p style="float: left; margin-left: 1%; font-size: 20px;">联系人:</p>
				<img style="float: right; margin-right: 1%; margin-top: 15px;" src="../img/add.png"/>
				<a onclick="go_linkman()" style="float: right; font-size: 20px;">添加联系人</a>
			</div>
			<div style="position: relative; width: 100%;">
				<hr id="back_line3" class="reserve_hr_2" />
				<hr id="back_line4" class="reserve_hr_2" style="display: none;"/>
			</div>
			<div id="linkman2" style="position: relative; width: 100%; height: auto; display: none;">
				<div style="position: relative; width: 100%;">
					<p style="float: left; margin-top: 20px; margin-left: 1%; font-size: 20px;">联系人:</p>
					<p style="float: left; margin-top: 20px; margin-left: 8%; font-size: 20px;">小凳子</p>
					<a style="float: right; margin-top: 10px; margin-right 5%; padding: 5px 10px 5px 10px; border: 1px solid #EBEBEB;">修改</a>
					<br />
				</div>
				<div style="position: relative; width: 100%; margin-top: 30px;">
					<p style="float: left;  margin-left: 15%; font-size: 20px;">13068856687</p>
				</div>
				<div style="position: relative; width: 100%; margin-top: 60px;">
					<p style="float: left; margin-left: 15%; font-size: 20px;">43022319891007321X</p>
					<br />
				</div>
			</div>
			<div id="back_line5" style="position: relative; width: 100%; display: none;">
				<hr class="reserve_hr_2" style="margin-top: 20px;"/>
			</div>
		</div>
		<div class="reserver_bottom">
			<a class="bottom_amount">金额</a>
			<a class="bottom_amount_price">￥  500</a>
			<a class="bottom_place_order">提交订单</a>
		</div>
	</div>
	<div id="book_date" class="wrapper" style="display: none;">
		<div class="header">
			<img class="left_img" src="../img/back.png" ></img>
			<a onclick="back_date()" >返回</a>
			出行时间选择
			<img class="right_img" src="../img/more.png" ></img>
		</div>
		<div class="content">
			<div id="step_2_a" style="display: block;">
				<div id="step_2_a1" style="float:left;width:100%;background:#aaaaaa">	
				</div>	
			</div>
		</div>	
	</div>
	<div id="linkman_view" class="wrapper" style="display: none;">
		<div class="header">
			<img class="left_img" src="../img/back.png" ></img>
			<a onclick="back_linkman()" >返回</a>
			联系人
			<img class="right_img" src="../img/more.png" ></img>
		</div>
	</div>	
	<div id="div_date_run">
		<div id="div_date_run_title">请选择出行日期</div>
		<div id="div_date_run_date">
			<span class="span_move_month" id="span_last_month" onclick="show_next_calendar('2016-04-01',-1)" ><<</span>
			<span id="span_now_month" >2016-04</span>
			<span class="span_move_month" id="span_next_month" onclick="show_next_calendar('2016-04-01',1)" >>></span>
		</div>
		<div id="div_date_calendar">
			<div id="div_date_calendar1" ></div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript">
	function go_date(){
		$('#book_one').css('display', 'none');
		$('#book_date').css('display', 'block');
		show_calendar()
	}
	function back_date(){
		$('#book_date').css('display', 'none');
		$('#book_one').css('display', 'block');
		$('#back_line1').css('display', 'block');
		$('#back_ticket').css('display', 'block');
		$('#back_line2').css('display', 'block');
	}
	function go_linkman(){
		$('#book_one').css('display', 'none');
		$('#linkman_view').css('display', 'block');
		show_calendar()
	}
	function back_linkman(){
		$('#linkman_view').css('display', 'none');
		$('#book_one').css('display', 'block');
		$('#back_line3_ex').css('display', 'none');
		$('#back_line3').css('display', 'none');
		$('#linkman1').css('display', 'none');
		$('#back_line4').css('display', 'block');
		$('#linkman2').css('display', 'block');
		$('#back_line5').css('display', 'block');
	}
	function show_next_calendar(cshowdate,dealflag)
	{
		var cnowdate = str2date(cshowdate);
		var cnowyear = cnowdate.getYear();	
		var cnowfullyear = cnowdate.getFullYear();
		var cnowmonth = cnowdate.getMonth();
		var ddate1 = new Date(cnowfullyear,cnowmonth+dealflag,1);
		var cnextfullyear = ddate1.getFullYear();
		var cnextmonth = ddate1.getMonth();
		var cnextdate = parseInt(cnextmonth)+1;
		cnextdate = cnextfullyear + '-' + cnextdate + '-1';
		show_calendar(cnextdate);
	}
	function show_calendar(cshowdate)
	{
		var cnowdate = str2date(cshowdate);
		var cnowyear = cnowdate.getYear();	
		var cnowfullyear = cnowdate.getFullYear();
		var cnowmonth = cnowdate.getMonth();
		var ddate1 = new Date(cnowfullyear,cnowmonth+1,1);
		var denddate = new Date(ddate1-86400000);
		var cendday = denddate.getDate();
		var clistdateweek = 0;
		
		var cnowdate2 = parseInt(cnowmonth)+1;
		cnowdate2 = cnowfullyear + '年' + cnowdate2 + '月';
		var cnowdate3 = cnowfullyear + '-' + cnowmonth + '-1';
		var cshow1 = '<span class="span_move_month" id="span_last_month" onclick="show_next_calendar(\'' + cnowdate3 + '\',0)" ><<</span>';
		cshow1 += '<span id="span_now_month" >' + cnowdate2 + '</span>';
		cshow1 += '<span class="span_move_month" id="span_next_month" onclick="show_next_calendar(\'' + cnowdate3 + '\',2)" >>></span>';
		document.getElementById('div_date_run_date').innerHTML = cshow1;
		
		var cshow = '<span class="span_calendar_title" >星期一</span><span class="span_calendar_title" >星期二</span><span class="span_calendar_title" >星期三</span><span class="span_calendar_title" >星期四</span><span class="span_calendar_title" >星期五</span><span class="span_calendar_title" >星期六</span><span class="span_calendar_title" >星期日</span>';

		for (var i=1;i<=cendday;i++)
		{
			var clistdate = new Date(cnowfullyear,cnowmonth,i);
			clistdateweek = clistdate.getDay();
			if (i==1)
			{
				if (clistdateweek == 0) clistdateweek = 7;
				for (var j=1;j<clistdateweek;j++)
				{
					cshow += '<span class="span_calendar_blank" >&nbsp;</span>';
				}
			}
			cshow += '<span class="span_calendar_enable" >' + i + '</span>';
		}
		if (clistdateweek>0)
		{
			for (var i=clistdateweek;i<7;i++)	
			{
				cshow += '<span class="span_calendar_blank" >&nbsp;</span>';
			}
		}
		document.getElementById('div_date_calendar1').innerHTML = cshow;
	}
	function str2date(DateStr){
		if(typeof DateStr=="undefined")return new Date();
		if(typeof DateStr=="date")return DateStr;
		var converted = Date.parse(DateStr);
		var myDate = new Date(converted);
		if(isNaN(myDate)){
			DateStr=DateStr.replace(/:/g,"-");
			DateStr=DateStr.replace(" ","-");
			DateStr=DateStr.replace(".","-");
			var arys= DateStr.split('-');
			switch(arys.length){
				case 7 : myDate = new Date(arys[0],--arys[1],arys[2],arys[3],arys[4],arys[5],arys[6]);
				break;
				case 6 : myDate = new Date(arys[0],--arys[1],arys[2],arys[3],arys[4],arys[5]);
				break;
				default: myDate = new Date(arys[0],--arys[1],arys[2]);
				break;
			};
		};
		return myDate;
	}	
	show_calendar('2016-12-01');
</script>
</html>