可滑动日期的场地申请

先上图

　　<header class="mui-bar mui-bar-nav">        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>        <h1 class="mui-title" id="site_name">预约情况</h1>    </header>        <div class="mui-content">        <div id="lecttime"></div>                <div id="weekday"></div>        <div id="siteinfo" style="width:100%"></div>        <button class="btn">预约</button>    </div>

　　　　#lecttime {            display:inline-block;            width: 100%;            height:40px;            line-height: 40px;            white-space: nowrap;            box-shadow: 0 1px 2px rgba(0,0,0,.1);            overflow-x: scroll;            overflow-y: hidden;            -webkit-backface-visibility: hidden;            -webkit-perspective: 1000;            -webkit-overflow-scrolling: touch;            text-align: justify;            padding: 0px 5px;            box-sizing: border-box;        }        #lecttime a{            text-decoration: none;            margin-right: 10px;            padding:5px;        }        #lecttime::-webkit-scrollbar{            display: none;        }        #weekday {            width:40px;            height:40px;            border-radius:50%;            margin:12px 0 0 12px;            text-align:center;            line-height:40px;            background:rgba(255,128,128,1);            color:white;            box-shadow:3px 3px 5px black;        }        .weekdaylected {            font-size:20px;            font-weight:bold;            color:rgba(255,128,128,1);        }        table tr td {            padding:10px;        }        .sitename {            height:60px;            background:#c2c2c2;            border-radius:6px;            text-align:center;        }        .time {            width:40%;            height:40px;            background:rgba(255,128,172,1);            border-radius:6px;            text-align:center;            color:white;        }        .reason {            height:40px;            background:rgba(113,184,255,1);            border-radius:6px;            text-align:right;            color:white;        }               .a_fontcolor {            color:#999999;        }            .btn {            width:90%;            height:50px;            background:rgba(38,153,251,1);            color:white;            border-radius:6px;            display:block;            margin:50px auto;            font-size:18px;          }

/**************************************************截取url参数**************************************************/var siteid = geturldata().id;//场地类型var sitename = decodeuri(geturldata().name);//场地名称function geturldata() {var url = window.location.arch;  url = url.substring(1); var dataobj = {};if (url.indexof('&') > -1) {url = url.split('&');for (var i = 0; i < url.length; i++) {var arr = url[i].split('=');dataobj[arr[0]] = arr[1];}}el {url = url.split('=');dataobj[url[0]] = url[1];}return dataobj;}/**************************************************初始化加载数据**************************************************/var inittime = new date();//时间var client_width = window.innerwidth || document.documentelement.clientinnerwidth || document.body.clientinnerwidth;//可视界面宽度get_month_day();//加载日期getsite();//加载对应日期数据//加载日期function get_month_day() {var year = inittime.getfullyear();var month = inittime.getmonth() + 1;var day = inittime.getdate();$("#lecttime").append('<a onclick="gopre()">&lt&ltgo</a>');for (var i = 1; i <= getdaysinmonth(year, month) ; i++) {var newdate = new date().tdate(i - 1);var weekday = new date(newdate).getday();if (i == day)var li = '<a class="weekdaylected">' + month + '-' + i + '</a>';elvar li = '<a class="a_fontcolor" onclick="a_click(this)">' + month + '-' + i + '</a>';$("#lecttime").append(li);}//计算，使初始化加载的日期在中间位置var width = $(".weekdaylected").width(); //a标签（日期）所占宽度var marginleft = $(".weekdaylected").offt().left; //a标签（日期）距离窗口左边的距离$("#lecttime").scrollleft(marginleft - client_width / 2 + width / 2);$("#lecttime").append('<a onclick="gonext()">go&gt&gt</a>');}//加载数据function getsite() {var year = inittime.getfullyear();var month = inittime.getmonth() + 1 < 10 ? "0" + (inittime.getmonth() + 1) : inittime.getmonth() + 1;var day = inittime.getdate() < 10 ? "0" + inittime.getdate() : inittime.getdate();var stime = year + "-" + month + "-" + day + " 00:00:00";var etime 我知道你都知道 歌词= year + "-" + month + "-" + day + " 23:59:59";var week_day = inittime.getday();/******************************************console.log("当前时间:" + inittime);console.log("当前年份:" + year);console.log("当前月份:" + month);console.log("当前天数:" + day);console.log("当前周几:" + week_day);console.log("开始时间:" + stime);console.log("结束时间:" + etime);******************************************///当前选中日期为星期几switch (week_day) {ca 0: week_day = "日"; break;ca 1: week_day = "一"; break;ca 2: week_day = "二"; break;ca 3: week_day = "三"; break;ca 4: week_day = "四"; break;ca 5: week_day = "五"; break;ca 6: week_day = "六"; break;}$("#weekday").html(week_day);//当前选中日期数据$.ajax({url: config.url() + "/workcenter/ajax/getdata.ashx?type=siteapplication&r=" + math.random(),datatype: 'json',type: 'post',data: { siteid: siteid, stime: stime, etime: etime },//场地id，开始时间，结束时间xhrfields: {withcredentials: true},success: function (res) {var table = '<table width="100%" style="border-collap:parate; border-spacing:15px;" id="sitelist">' +'<tr><td colspan="2" class="sitename"></td></tr>' +'</table>';$("#siteinfo").append(table);if (res.length > 0) {for (var i = 0; i < res.length; i++) {var shou = new date(res[i].starttime).gethours() < 10 ? "0" + new date(res[i].starttime).gethours() : new date(res[i].starttime).gethours();var smin = new date(res[i].starttime).getminutes() < 10 ? "0" + new date(res[i].starttime).getminutes() : new date(res[i].starttime).getminutes();var starttime = shou + ":" + smin;var ehou = new date(res[i].endtime).gethours() < 10 ? "0" + new date(res[i].endtime).gethours() : new date(res[i].endtime).gethours();var emin = new date(res[i].endtime).getminutes() < 10 ? "0" + new date(res[i].endtime).getminutes() : new date(res[i].endtime).getminutes();var endtime = ehou + ":" + emin;var row = '<tr><td class="time">' + starttime + '-' + endtime + '</td><td class=我所有的思念"reason">' + res[i].siteschedulename + '</td></tr>';$("#元宵节介绍sitelist").append(row);}$(".sitename").html(sitename);}el {$(".sitename").html("暂无预约");} }})}/**************************************************调用方法**************************************************///计算本月天数function getdaysinmonth(year, month) {//本来标准时间的month应该为当前month-1，这里就使用当前month作为标准时间的monthmonth = parint(month);//转化为标准时间后为下一个月的数据，设置day为0表示上个月最后一天，这样就切换到了所求月份的最后一天var temp = new date(year, month, 0);return temp.getdate();}//加载上个月数据function gopre() {inittime = new date(inittime.tdate(1));inittime = new date(inittime.tmonth(inittim电厂脱硝e.getmonth() - 1));$("#siteinfo").hide().show(500);$("#lecttime").empty();$("#siteinfo").empty();get_month_day();//加载日期getsite();//加载对应日期数据}//加载下个月数据function gonext() {inittime = new date(inittime.tdate(1));inittime = new date(inittime.tmonth(inittime.getmonth() + 1));$("#siteinfo").hide().show(500);$("#lecttime"张卫健资料).empty();$("#siteinfo").empty();get_month_day();//加载日期getsite();//加载对应日期数据}//本月切换日期//选中后不再触发点击事件function a_click(obj) {var lecttime = $(obj).text();var time = inittime.getfullyear() + "-" + lecttime;inittime = new date(time);//为上一个选中日期添加选中事件，移除现在选中日期的默认样式并添加选中样式，为上一个选中日期添加默认样式$("#lecttime .weekdaylected").attr("onclick", "a_click(this);");$("#lecttime .weekdaylected").removeclass("weekdaylected").addclass("a_fontcolor");$(obj).removeclass("a_fontcolor").addclass("weekdaylected");//加载数据的时候，页面会闪动，用动画效果来平滑过渡$("#siteinfo").hide().show(500);$("#siteinfo").empty();getsite();//为避免事件中途因意外停止，在点击事件完成后再移除现在选中日期的点击事件$(obj).removeattr("onclick");}