前端签到与后台逻辑代码实现

viktoria

已于 2023-05-15 15:41:19 修改

阅读量5.3k

点赞数 4

分类专栏： Java中，工具类前端文章标签：签到

于 2018-12-21 11:05:10 首次发布

本文链接：https://blog.csdn.net/viktoria/article/details/85158787

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Java中，工具类

1 篇文章 0 订阅

订阅专栏

直接上效果图

贴上前端代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../js/layui/css/layui.css" media="all" />
<title>签到</title>
</head>
<body>
	<form class="layui-form">
		<div class="layui-container" style="padding: 15px;">
			<div class="layui-row">
				<div class="layui-col-md2">
					<blockquote class="layui-elem-quote">签到区域-</blockquote>
					<div class="layui-inline" id="signInPanel"></div>
				</div>
			</div>
		</div>
	</form>
<script type="text/javascript" src="../js/layui/layui.js"></script>
<script>
	layui.use(['layer', 'form', 'jquery', 'laydate'],
		function() {
			var layer = layui.layer, $ = layui.jquery, laydate = layui.laydate, form = layui.form;
			//定义json	
			var data = {};
			var new_date = new Date();
			var data = {};
			var markDate;
			var nowDate = new Date();
			var userId = '1';
			var data = {
				userId : userId,
				day : 30
			};
			//获取签到记录 加载到日期控件上
			var markDate;
			$.ajaxSettings.async = false;
			$.post('/sign/getSignInList', data,
					function(result) {
						if (result.code == 0) {
							if (result.item) {
								markDate = result.item;
							} else {
								markDate = {};
							}
						} else {
							top.layer.msg("签到数据初始化错误!");
						}
					});
			$.ajaxSettings.async = true;
			loding_date(new_date, data, markDate);
			//日历插件调用方法  
			function loding_date(date_value, data, markDate) {
				laydate.render({
					elem : '#signInPanel',
					type : 'date',
					theme : 'grid',
					max : '2099-06-16 23:59:59',
					position : 'static',
					range : false,
					mark : markDate,
					value : date_value,
					calendar : false,
					btns : false,
					done : function(value, date, endDate) {
						console.log(value);
						console.log(date);
						console.log(endDate);
						//layer.msg(value)
						//调用弹出层方法
						date_chose(value, data);
					}
				});
			}
			//定义弹出层方法
			function date_chose(obj_date, data) {
				if (markDate) {
					if (markDate.hasOwnProperty(obj_date)) {
						top.layer.msg("当前已签到无需重复签到!");
						return;
					}
				}
				var currentTime = new Date()
						.Format("yyyy-MM-dd");
				if (obj_date != currentTime) {
					top.layer.msg("非当前日期不可以签到!");
					return;
				}

				var index = layer.confirm('您确定要签到？', {
					title : '提示',
					btn : [ '签到', '取消' ]
				//按钮
				}, function() {
					var params = {
						'signInDate' : obj_date
					};
					top.layer.msg("签到成功!");
					markDate[obj_date + ""] = "√";
					chose_moban(obj_date, data);
					layer.close(index);
					/*$.post('/home/signIn', params, function(result){
					 if(result.code==0){
					 top.layer.msg("签到成功!");
					 markDate[obj_date+""]="√";
					 chose_moban(obj_date,data);
					 layer.close(index);
					 }else{
					 top.layer.msg("签到失败:"+result.msg);
					 layer.close(index);
					 }
					 }); */
				}, function() {
					chexiao(obj_date, data);
				});
			}
			//定义添加/编辑标注方法
			function chose_moban(obj_date, markJson) {
				//获取弹出层val
				var chose_moban_val = $('#text_book').val();
				$('#signInPanel').html('');//重要！由于插件是嵌套指定容器，再次调用前需要清空原日历控件
				//markJson[obj_date] = chose_moban_val;//√
				markJson[obj_date] = "√";
				console.log(JSON.stringify(markJson));
				//再次调用日历控件，
				loding_date(obj_date, markJson, markDate);//重要！，再标注一个日期后会刷新当前日期变为初始值，所以必须调用当前选定日期。
			}
			//撤销选择
			function chexiao(obj_date, markJson) {
				//删除指定日期标注
				delete markJson[obj_date];
				console.log(JSON.stringify(markJson));
				$('#signInPanel').html('');
				loding_date(obj_date, markJson, markDate);
			}
		})
/* 		(new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 
		(new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18 */
	 	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;
	 	}
</script>
</body>
</html>

后台获取已签到的数据

前后台签到代码下载

viktoria

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
10
评论
前端签到与后台逻辑代码实现

直接上效果图贴上前端代码<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/T...
复制链接

扫一扫