实现 js 或者 JQuery 的网页预约功能，我之前在网上找了一段代码，想改一改，但是看不懂,JQuery代码在下面

wangdan_2013 2016-09-24 09:32:18

JQuery代码

$(function() {
var today = new Date();
$("input[name = btn-my]").click(function() {
location.href = "myrecord.jsp";
});
$(".ckRadio2:first").addClass("btn-info");
$(".ckRadio2").each(function(i) {
var newdate = new Date();
newdate.setDate(today.getDate() + i)
var day = newdate.format("yyyy-MM-dd");
$(this).attr("date",day);
$(this).html(day);
});
$(".ckRadio2").click(function() {
$(".ckRadio2").removeClass("btn-info");
$(this).addClass("btn-info");
getVenues();
});

$.post("sport/getSportInfo.action", {}, function(data, status) {
$("#sports ul").empty();
$("#sports ul").append("<li><a sportId=0 class='ckRadio1'>不限</a></li>");
var sportJson = data.data.Sport;
$(sportJson).each(function(i) {
$("#sports ul").append("<li><a sportId=" + sportJson[i].sportId + " class='ckRadio1'>" + sportJson[i].sportName + "</a></li>");
});
$(".ckRadio1:first").addClass("btn-info");
$(".ckRadio1").click(function() {
$(".ckRadio1").removeClass("btn-info");
$(this).addClass("btn-info");
var sportId = $(this).attr("sportId");
$(".venuesItem").parent().hide().end()
.removeClass("btn-info")
.filter(sportId == 0? "[sportId!=0]": "[sportId=" + sportId + "]").parent().show().end()
.eq(0).addClass("btn-info");
getVenues();
});
getVenues();
}, "json");

$("[name='btn-reserve']").click(getReserve);
});

function getReserve() {
$(".selected").each(function() {
/**
* 根据所在行，获得当前预约的时间段，和预约的日期，并进行相应的格式化，转化为预约开始时间和预约结束时间
* 根据所在的列数获得场地号
*/
var time = $(this).parent().find("th").text();
var location = $(this).prevAll().length;
var hours = time.split("-")[0].split(":")[0];
var datetime = new Date($('.ckRadio2.btn-info').attr("date"));
datetime.setHours(parseInt(hours));
var startTime = datetime.format("yyyy-MM-dd hh:mm:ss");
datetime.setHours(parseInt(hours) + 1);
var endTime = datetime.format("yyyy-MM-dd hh:mm:ss");

//预约提交的参数
var params = {
"venuesId": $(".venuesItem.btn-info").attr("venuesId"),
"location": location,
"startTime": startTime,
"endTime": endTime
};

//为了使ajax回调函数中能访问到当前表格单元，将其存入变量$td中
var $td = $(this);

$.post("reserve/makeReserve.action", params, function(data, status) {
//如果预约成功，则将原来的“useable”变为“occupied”，并且解除点击事件，不可预约
if(data.message.result == "success") {
$td.removeClass().addClass("occupied").unbind("click");
}
var mesg = data.message.result == "success" ? "预约成功" : "预约失败";
//在表格下方展示此次预约的结果，包括详细信息
$(".reserveResult").append("<p>" + mesg + "：" + $(".venuesItem.btn-info").text() + "，场地"+ params.location
+"，时间：" + params.startTime +" 到 " + params.endTime + "</p>");
}, "json");
});
}

function submitQuery() {

/**
* 获取查询的日期和场馆id
*/
var date = $(".ckRadio2").filter(".btn-info").attr("date");

var sportId = $(".ckRadio1.btn-info").attr("sportId");
var venuesId = $(".venuesItem.btn-info").attr("venuesId");

/**
* ajax查询已经预约的列表
*/
$.post("venues/getVenuesRecordList.action", {"venuesId": venuesId, "queryDay": date}, function(data, status) {

var venues = data.data.Venues;

/**
* 场馆的信息
* @Param venuesNum 场地的总数
* @Param venuesName 场馆的名称，表格中场地使用“场馆名” + “场地号”表示
* @Param openTime 开放时间
* @Param closeTime 结束时间
* @Param record 指定日期，该场馆的预约列表
*/
var venuesNum = parseInt(venues.venuesNum);
var venuesName = venues.venuesName;
var openTime = parseInt(venues.openTime.split(":")[0]);
var closeTime = parseInt(venues.closeTime.split(":")[0]);

var record = venues.Record;

//清空当前预约table
$("#resourceTable").empty();

//设置表头：场地
var tbRow = "<tr><th></th>";
for (var i = 1;i <= venuesNum; i ++)
tbRow += "<th>" + venuesName + i + "</th>";
tbRow += "</tr>";
$("#resourceTable").append(tbRow);

//从开放时间到关闭时间，每一小时为一个预约时间段
for (var time = openTime; time < closeTime; time ++) {
var show_time = time + ":00-" + (time + 1) + ":00";
tbRow = "<tr><th>" + show_time + "</th>";
for (var i = 1;i <= venuesNum;i ++)
tbRow += "<td></td>";
tbRow += "</tr>";
$("#resourceTable").append(tbRow);
}

var first_row = openTime;
var today = new Date();
//判断预约的时间是否为今天，如果是今天就将过期的时间设置为当前时间（小时）
var end_row = today.getDate() < (new Date(date)).getDate()? first_row - 1: parseInt((new Date()).getHours());
//对table的每一行，如果是在过期时间之前的时间段，就将这一行所有td的class设置为“outtime”，表示不可预约，否则class设置为“useable”表示可预约。
$("#resourceTable tr").each(function(i) {
$(this).find("td").addClass(i + first_row <= end_row? "outtime": "useable");
});

//开始遍历，根据每条预约记录的开始时间和场地，生成对应的行坐标和列坐标，找到表格中对应位置的td删除本身的class，增加“occupied”表示对应时段该场地已经被预约
$(record).each(function(i) {
var row = parseInt(record[i].startTime.split(":")[0]) - openTime + 1;
var col = parseInt(record[i].location) - 1;
console.log("row:"+row+",col:"+col);
$("#resourceTable tr").eq(row).find("td").eq(col).removeClass().addClass("occupied");
});

//为所有可以预约的td绑定一个click事件，即点击表示选中，再点一次恢复原来状态，直到点击预约按钮预约成功后，解除click事件，并由“useable”变为“occupied”
$("tr .useable").bind("click", function() {
$(this).toggleClass("selected");
});

}, "json");
}

function getVenues() {
if ($(".search").find(".venuesItem")[0]) {
submitQuery();
return;
}
$.post("sport/getSportVenues.action", {"dataType":"json"} ,function(data, status) {
var $ul = $("<ul></ul>");
var sport = data.data.Sport;
$(sport).each(function(i) {
var sportId = sport[i].sportId;
var venues = sport[i].Venues;
$(venues).each(function(k) {
var $li = $("<li><a>" + venues[k].venuesName + "</a></li>")
.find("a").addClass("venuesItem").attr("sportId",sportId).attr("venuesId",venues[k].venuesId)
.end();
$ul.append($li);
});
});
$(".search").addClass("choose").append($ul);

// $(".venues_item:first").addClass("btn-info");
var sportId = $(".ckRadio1:first").attr("sportId");
$(".venuesItem").parent().hide().end()
.removeClass("btn-info")
.filter(sportId == 0? "[sportId!=0]": "[sportId=" + sportId + "]").parent().show().end()
.eq(0).addClass("btn-info")
.end().end()
.click(function() {
$(".venuesItem").removeClass("btn-info");
$(this).addClass("btn-info");
submitQuery();
});
submitQuery();
});
}
Date.prototype.format = function (fmt) {
var o = {
"M+": this.getMonth()+1,
"d+": this.getDate(),
"h+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3),
"S": this.getMilliseconds()
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
...全文
1448 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
斯洛文尼亚旅游 2016-09-28
  • 打赏
  • 举报
 回复
花钱让别人帮你弄了，整一个系统了，这里是解决问题的，不是来帮你做系统的。自己多学点基础
wangdan_2013 2016-09-24
  • 打赏
  • 举报
 回复
wangdan_2013 2016-09-24
  • 打赏
  • 举报
 回复
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>预约</title> <link rel="stylesheet" href="css/base.css"/> <link rel="stylesheet" href="css/floor.css"/> <link rel="stylesheet" href="css/bookview.css"/> <link rel="stylesheet" href="css/main.css"/> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/bookview.js"></script> </head> <body> <div> <!--<div> <img src="img/dlut.jpg" class="logo"/> </div>--> <div id="nav"> <ul> <li><a href="main.jsp">首页</a></li> <li><a href="bookview.jsp">预约</a></li> <!--<li><a href="courtinfo.jsp">场馆管理</a></li>--> <li><a href="login.html">登录</a></li> <li><a href="aboutus.html">联系我们</a></li> </ul> </div> <div> <div class="choose" id="sports"> <div>学习项目选择</div> <!-- 以下部分应由js动态生成 --> <ul> <li><a>C1</a></li> <li><a>C2</a></li> </ul> </div> <div class="choose"> <div>日期选择</div> <ul> <li><a class="ckRadio2"></a></li> <li><a class="ckRadio2"></a></li> <li><a class="ckRadio2"></a></li> <li><a class="ckRadio2"></a></li> </ul> <font color="red">注：只显示当日及后三日场地情况。</font> </div> <div class="search"> <strong>搜索结果：</strong> </div> <div class="notice"> 注：<div class="occupied">  </div>为已被占用场地 <div class="outtime">  </div>为已过期场地 <div class="useable">  </div>为可预约场地 </div> <table > <tbody id="resourceTable"> <!-- 以下部分应由js动态生成 --> <tr> <th></th> <th>王教练</th> <th>张教练</th> <th>飞教练</th> <th>偶教练</th> <th>想教练</th> <th>是教练</th> <th>她教练</th> <th>有教练</th> <th>没教练</th> </tr> <tr> <th>9:00-10:00</th> <td class="outtime"></td> <td class="outtime"></td> <td class="occupied"></td> <td class="outtime"></td> <td class="outtime"></td> <td class="outtime"></td> <td class="outtime"></td> <td class="outtime"></td> <td class="outtime"></td> </tr> <tr> <th>10:00-11:00</th> <td class="outtime"></td> <td class="outtime"></td> <td class="occupied"></td> <td class="outtime"></td> <td class="outtime"></td> <td class="outtime"></td> <td class="outtime"></td> <td class="outtime"></td> <td class="outtime"></td> </tr> <tr> <th>11:00-12:00</th> <td class="useable"></td> <td class="useable"></td> <td class="useable"></td> <td class="useable"></td> <td class="useable"></td> <td class="useable"></td> <td class="useable"></td> <td class="occupied"></td> <td class="occupied"></td> </tr> </tbody> </table> <div class="btn-area"> <input type="button" name="btn-reserve" value="预约场地"/> <input type="button" name="btn-my" value="查看我的预约"/> </div> <div class="reserveResult"> </div> </div> </div> <div id="bottom"> Copyright © 2015 - 2016 DutGym.All Rights Reserved.<br> DUT体育馆创新项目团队 版权所有 </div> </body> </html> 这个是HTML代码
html+php网上预约网页及表单数据保存到mysql
做的是个仓库预约的小demo 后台是php写的 ，因为没学过前端知识和后台技术。网页也是在网上扒拉来的模板改的，所以不规范地方请自行更改。 这是原网页 这是我改的： 由于单纯的一个静态html网页在实际应用中没什么卵用，需要搭配后台，才能够将网页提交的数据送往你想存储的地方或者在进行二次处理。也就是说 在你点击submit(图中提交申请按钮)按钮之后，剩下的事情就的由后台处理了。写后台...
实现网页时间选择功能的jQuery控件包
本文还有配套的精品资源，点击获取 简介：jQuery是一个简化JavaScript编程的库，它在前端开发中扮演着核心角色。本压缩包文件中包含一个专门为网页设计的时间选择器jQuery插件。时间控件是用户界面组件的一个常见形式，允许用户以直观的方式选择时间。时间插件，如DateTimePicker、Timepicker等，扩展了HTML元素的功能，增加了时间选择功能。这些插件...
jquery实现进度条
jquery实现进度条 最近看到一个网站的进度条很好看所以想写这篇有点不是很好的文章 我们先把我们网页的大致布局写好， 我用了个input标签和两个div标签。 如下图： 然后我在给我定义的类写CSS样式。如下图： 在这里，我还引用Bootstrap框架， 因为我只是实现一个进度条的功能，所以我把代码写在了个HTML文件中，如果你们自己想在自己的网站中实现进度条，不要像我这样写哦！ ...
JavaScript小时和分钟时间选择器插件：jquery-timepicker.js详解
jquery-timepicker.js 是一款非常实用的 jQuery 插件，用于在网页上提供一个轻量级的时间选择器。它提供了多种时间选择方式，以满足不同的场景需求，包括单点时间选择、时间范围选择等。以下是它的一些核心功能：单点时间选择：用户可以选择一个具体的时间点，例如工作日的开始时间。时间范围选择：用户可以设定一个时间段，如会议的开始和结束时间。可配置的时间间隔：可以通过设置最小/最大时间以及时间间隔来限定用户选择的时间。不同时区支持。
前端：医院挂号平台（html+css+jquery）
花了两天终于把这个网页写完了，哈哈 素材图片就不传了，效果图如下： <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>城市医院预约平台</title> <link rel="sty...
Ajax

52,778

社区成员

25,334

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章