日历签到和积分累计的php实现方法

网站开发过程中我们会经常用到签到功能来奖励用户积分，或者做一些其他活动。这次项目开发过程中做了日历签到，因为没有经验所有走了很多弯路，再次记录过程和步骤。

1.日历签到样式：使用的是calendar日历插件

前台代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>日历签到</title>
<meta name="keywords" content="日历签到"/>
<meta name="description" content="日历签到"/>
<meta content="telephone=no" name="format-detection" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<link href="__TPL__/css/index.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="__TPL__/css/main.css">
<link rel="stylesheet" type="text/css" href="__TPL__/css/self.css">
<link rel="stylesheet" type="text/css" href="__TPL__/css/swiper.min.css">
</head>
<body style="background:#fff;">
<div class="warpper">
 <div class="sign">
 <ul>
 <li><span>本月签到</span><b><?if(is_array($sign)){echo count($sign);}else{echo '0';}?></b></li>
 <li><span>签到累计</span><b><?php if(is_array($allsign)){echo count($allsign);}else{echo '0';}?></b></li>
 <li><span>累计积分</span><b><?php if(is_array($allsign)){echo count($allsign)*$config['site_praise'];}else{echo '0';}?></b></li>
 <li><span>全部积分</span><b><?php echo ceil($user['integral']);?></b></li>
 </ul>
 </div>
 <input type="hidden" name="" value="__URL__/checksign.html" id="sign">
 <div class="singBox" id="calendar"></div>
 <div class="qdbox"><a href="javascript：;" class="qd_btn" onclick="sign_()" style="background: <?php echo is_sign_now()?'':'rgb(135, 135, 135)'; ?>" ><?php echo is_sign_now()?'签到':'已签到'; ?></a></div>
<script src="__TPL__/js/jquery.min.js"></script> 
<script src="__TPL__/js/swiper.min.js"></script>
<script src="__TPL__/js/calendar.js"></script>
<script src="__TPL__/js/js.js"></script>
<script type="text/javascript" src="__TPL__/js/layer/2.1/layer.js"></script>
{include file="footer"}
<script type="text/javascript">
$(function(){
 var arr='';
//var signList=[{"signDay":"09"},{"signDay":"11"}];
 <?php if(is_array($sign)){ foreach($sign as $vo){ ?>
 arr+="{'signDay':'<?php echo $vo['day'];?>'},";
 <?php }?>
 arr = arr.substr(0,arr.length-1);
 arr ="["+arr+"]";
 var signList = eval('(' + arr + ')');
 <?php }else{?>
 var signList=[];
 <?php }?>
 calUtil.init(signList);
});
</script>
<script type="text/javascript">
function sign_(){
 $.ajax({
 type:'GET',
 url:"__URL__/checksign.html", 
 dataType:'json',
 success:function(res){
 if(res.result==1){
 window.location.href="__URL__/sign.html"
 }else{
 alert(res.msg);
 }
 }
 })
}
</script>

插件calendar.js 修改如下：

var calUtil = {
 //当前日历显示的年份
 showYear:2015,
 //当前日历显示的月份
 showMonth:1,
 //当前日历显示的天数
 showDays:1,
 eventName:"load",
 //初始化日历
 init:function(signList,s=''){
 calUtil.setMonthAndDay();
 if (typeof(s) == 'undefined'){
 }else{
 signList.splice('','',s);
 }
 calUtil.draw(signList);
 calUtil.bindEnvent(signList);
 },
 draw:function(signList){
 //绑定日历
 //alert(signList.length);
 // console.log(signList);
 if(signList.length > 21){
 //alert(21);
 $("#sign_note").empty();
 $("#sign_note").html('<button class="sign_contener" type="button"><i class="fa fa-calendar-check-o" aria-hidden="true"></i> 已达标，获取1次抽奖</button>');
 }
 var str = calUtil.drawCal(calUtil.showYear,calUtil.showMonth,signList);
 $("#calendar").html(str);
 //绑定日历表头
 var calendarName=calUtil.showYear+"/"+calUtil.showMonth+"";
 $(".calendar_month_span").html(calendarName); 
 },
 //绑定事件
 bindEnvent:function(signList){
 // //绑定上个月事件
 // $(".calendar_month_prev").click(function(){
 // //ajax获取日历json数据
 // //var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
 // calUtil.eventName="prev";
 // calUtil.init(signList);
 // });
 // //绑定下个月事件
 // $(".calendar_month_next").click(function(){
 // //ajax获取日历json数据
 // //var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
 // calUtil.eventName="next";
 // calUtil.init(signList);
 // });
 $(".calendar_record").click(function(){
 //ajax获取日历json数据
 // console(typeof(signList)+"yxy");
 //var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
 //var tmp = {"signDay":$(this).html()};
 //if (typeof(signList) == 'undefined'){
 //不做处理
 //}else{
 // signList.splice('','',tmp);
 // console.log(signList);
 // calUtil.init(signList);
 // }
 //alert($(this).html());
 var tmp = {"signDay":$(this).html()};
 console.log(tmp.signDay)
 // if(tmp.signDay==11){
 //执行签到
 $.ajax({
 type:'POST',
 url:"checksign.html", 
 data:{day:tmp.signDay},
 dataType:'json',
 success:function(res){
 // if(res.result==1){
 // calUtil.init(signList,tmp);
 // }else{
 alert(res.msg);
 location.reload(true);
 // }
 }
 })
 // }else{
 // alert("请签到当天日期")
 // }
 });
 },
 //获取当前选择的年月
 setMonthAndDay:function(){
 switch(calUtil.eventName)
 {
 case "load":
 var current = new Date();
 calUtil.showYear=current.getFullYear();
 calUtil.showMonth=current.getMonth() + 1;
 break;
 case "prev":
 var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];
 calUtil.showMonth=parseInt(nowMonth)-1;
 if(calUtil.showMonth==0)
 {
 calUtil.showMonth=12;
 calUtil.showYear-=1;
 }
 break;
 case "next":
 var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];
 calUtil.showMonth=parseInt(nowMonth)+1;
 if(calUtil.showMonth==13)
 {
 calUtil.showMonth=1;
 calUtil.showYear+=1;
 }
 break;
 }
 },
 getDaysInmonth : function(iMonth, iYear){
 var dPrevDate = new Date(iYear, iMonth, 0);
 return dPrevDate.getDate();
 },
 bulidCal : function(iYear, iMonth) {
 var aMonth = new Array();
 aMonth[0] = new Array(7);
 aMonth[1] = new Array(7);
 aMonth[2] = new Array(7);
 aMonth[3] = new Array(7);
 aMonth[4] = new Array(7);
 aMonth[5] = new Array(7);
 aMonth[6] = new Array(7);
 var dCalDate = new Date(iYear, iMonth - 1, 1);
 var iDayOfFirst = dCalDate.getDay();
 var iDaysInMonth = calUtil.getDaysInmonth(iMonth, iYear);
 var iVarDate = 1;
 var d, w;
 aMonth[0][0] = "日";
 aMonth[0][1] = "一";
 aMonth[0][2] = "二";
 aMonth[0][3] = "三";
 aMonth[0][4] = "四";
 aMonth[0][5] = "五";
 aMonth[0][6] = "六";
 for (d = iDayOfFirst; d < 7; d++) {
 aMonth[1][d] = iVarDate;
 iVarDate++;
 }
 for (w = 2; w < 7; w++) {
 for (d = 0; d < 7; d++) {
 if (iVarDate <= iDaysInMonth) {
 aMonth[w][d] = iVarDate;
 iVarDate++;
 }
 }
 }
 return aMonth;
 },
 ifHasSigned : function(signList,day){
 var signed = false;
 $.each(signList,function(index,item){
 if(item.signDay == day) {
 signed = true;
 return false;
 }
 });
 return signed ;
 },
 drawCal : function(iYear, iMonth ,signList) {
 var myMonth = calUtil.bulidCal(iYear, iMonth);
 var htmls = new Array();
 htmls.push("<div class='sign_main' id='sign_layer'>");
 htmls.push("<div class='sign_succ_calendar_title'>");
 //htmls.push("<div class='calendar_month_next'>下月</div>");
 //htmls.push("<div class='calendar_month_prev'>上月</div>");
 htmls.push("<div class='calendar_month_span'></div>");
 htmls.push("</div>");
 htmls.push("<div class='sign_equal' id='sign_cal'>");
 htmls.push("<div class='sign_row'>");
 htmls.push("<div class='th_1 bold'>" + myMonth[0][0] + "</div>");
 htmls.push("<div class='th_2 bold'>" + myMonth[0][1] + "</div>");
 htmls.push("<div class='th_3 bold'>" + myMonth[0][2] + "</div>");
 htmls.push("<div class='th_4 bold'>" + myMonth[0][3] + "</div>");
 htmls.push("<div class='th_5 bold'>" + myMonth[0][4] + "</div>");
 htmls.push("<div class='th_6 bold'>" + myMonth[0][5] + "</div>");
 htmls.push("<div class='th_7 bold'>" + myMonth[0][6] + "</div>");
 htmls.push("</div>");
 var d, w;
 for (w = 1; w < 6; w++) {
 htmls.push("<div class='sign_row'>");
 for (d = 0; d < 7; d++) {
 var ifHasSigned = calUtil.ifHasSigned(signList,myMonth[w][d]);
 console.log("001:"+ifHasSigned);
 if(ifHasSigned && typeof(myMonth[w][d]) != 'undefined'){
 htmls.push("<div class='td_"+d+" on'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</div>");
 } else {
 htmls.push("<div class='td_"+d+" calendar_record'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</div>");
 }
 }
 htmls.push("</div>");
 }
 htmls.push("</div>");
 htmls.push("</div>");
 htmls.push("</div>");
 return htmls.join('');
 }
};

PHP代码的实现

我们的投资过程中，每天复盘、查资料都需要看很多网站。为了方便大家，今天就把我平时常看的优质网站整理了一下，分享给大家，希望对大家有帮助，觉得好的话可以分享或者收藏起来，以备不时之需！这些都是经过人工筛选，绝对干货哦！

一、重要数据

资金流向 http://data.eastmoney.com/zjlx/

投资者数量 http://www.chinaclear.cn/zdjs/xmzkb/center_mzkb.shtml

龙虎榜 http://data.eastmoney.com/stock/lhb.html

新股日历 http://data.eastmoney.com/xg/xg/calendar.html

股权质押 http://data.eastmoney.com/gpzy/

沪港通 http://data.eastmoney.com/hsgt/index.html

业绩预告 http://data.eastmoney.com/bbsj/yjyg.html

基金数据 http://fund.eastmoney.com/data/

经济数据 http://data.eastmoney.com/cjsj/cpi.html

行情中心 http://quote.eastmoney.com/center/

股指期货 http://futures.10jqka.com.cn/

新三板 http://xinsanban.10jqka.com.cn/

IPO信息 http://www.cninfo.com.cn/eipo/index.jsp

美股咨询 http://stock.10jqka.com.cn/usstock/

私募信息 https://www.simuwang.com/

二、常用软件

同花顺 http://www.10jqka.com.cn/

东方财富网 https://www.eastmoney.com/

大智慧 http://www.dzh.com.cn/

富途牛牛 https://www.futunn.com/?lang=zh-CN

老虎证券 https://www.itiger.com/

三、优质网站

华尔街见闻 https://wallstreetcn.com/

雪球 https://xueqiu.com/

英为财经 https://cn.investing.com/

财联社 https://www.cls.cn/

四、研报

发现研报 https://www.fxbaogao.com/

萝卜投研 https://robo.datayes.com/

东方财富研报 https://data.eastmoney.com/report/

报告查一查 http://report.seedsufe.com/#/index

乌拉邦研报搜索引擎 https://www.ulapia.com/

行行查 https://www.hanghangcha.com/

乐晴智库 http://www.767stock.com/

五、量化交易

Bigquant https://bigquant.com/

掘金https://www.myquant.cn/

优矿https://uqer.datayes.com/

万矿http://windquant.com/

聚宽https://www.joinquant.com

米筐http://www.ricequant.com

看完文章的朋友欢迎点下关注或转发，方便及时收到最新潜力优质股分析！投资路上，深度研究笔记，与你一路同行！

涨停|翻倍|白马股|龙头|价值投资|牛股|行业分析|估值|自选股|分红|高增长|业绩|财务|暴涨|风口|

机构|散户|牛散|庄家|成长股|绩优股|蓝筹|外资|基金|QFII|融资融券|医药|白酒|股票|贵州茅台|

赚钱|分红|换手|涨幅|收益|量比|市盈率|市净率|净资产|市值|估值|证金|美元|人民币|马云|成长性|

消费股|安全垫|利润率|题材股|

景

上周接到一个需求，开发一个工作日历组件。找了一圈没找到合适的，索性自己写一个。

下面给大家分享一下组件中使用到的一些日期API和后面实现的框选元素功能。

效果展示

demo体验地址：dbfu.github.io/work-calend…

开始之前

lunar-typescript

介绍组件之前先给大家介绍一个库lunar-typescript。

lunar是一个支持阳历、阴历、佛历和道历的日历工具库，它开源免费，有多种开发语言的版本，不依赖第三方，支持阳历、阴历、佛历、道历、儒略日的相互转换，还支持星座、干支、生肖、节气、节日、彭祖百忌、每日宜忌、吉神宜趋、凶煞宜忌、吉神方位、冲煞、纳音、星宿、八字、五行、十神、建除十二值星、青龙名堂等十二神、黄道日及吉凶等。仅供参考，切勿迷信。

这个库封装了很多常用的api，并且使用起来也比较简单。

本文用到了上面库的获取农历和节气方法。

复习Date Api

new Date

可以使用new Date()传年月日三个参数来构造日期，这里注意一下月是从零开始的。

获取星期几

可以使用getDay方法获取，注意一下，获取的值是从0开始的，0表示星期日。

获取上个月最后一天

基于上面api，如果第三个参数传0，就表示上个月最后一天，-1，是上个月倒数第二天，以此类推。（PS：这个方法还是我有次面试，面试官告诉我的。）

获取某个月有多少天

想获取某个月有多少天，只需要获取当月最后天的日期，而当月最后一天，可以用上面new Date第三个参数传零的方式获取。

假设我想获取2023年12月有多少天，按照下面方式就可以获取到。

日期加减

假设我现在想实现在某个日期上加一天，可以像下面这样实现。

这样实现有个不好的地方，改变了原来的date，如果不想改变date，可以这样做。

比较两个日期

在写这个例子的时候，我发现一个很神奇的事情，先看例子。

大于等于结果是true，小于等于结果也是true，正常来说肯定是等于的，但是等于返回的是false，是不是很神奇。

其实原理很简单，用等于号去比较的时候，会直接比较两个对象的引用，因为是分别new的，所以两个引用肯定不相等，返回false。

用大于等于去比较的时候，会默认使用date的valueOf方法返回值去比较，而valueOf返回值也就是时间戳，他们时间戳是一样的，所以返回true。

说到这里，给大家分享一个经典面试题。

console.log(a == 1 && a == 2 && a == 3)，希望打印出true。

原理和上面类似，感兴趣的可以挑战一下。

这里推荐大家比较两个日期使用getTime方法获取时间戳，然后再去比较。

实战

数据结构

开发之前先把数据结构定一下，一个正确的数据结构会让程序开发变得简单。

根据上面效果图，可以把数据结构定义成这样：


/**
 * 日期信息
 */
export interface DateInfo {
  /**
   * 年
   */
  year: number;
  /**
   * 月
   */
  month: number;
  /**
   * 日
   */
  day: number;
  /**
   * 日期
   */
  date: Date;
  /**
   * 农历日
   */
  cnDay: string;
  /**
   * 农历月
   */
  cnMonth: string;
  /**
   * 农历年
   */
  cnYear: string;
  /**
   * 节气
   */
  jieQi: string;
  /**
   * 是否当前月
   */
  isCurMonth?: boolean;
  /**
   * 星期几
   */
  week: number;
  /**
   * 节日名称
   */
  festivalName: string;
}

/**
 * 月份的所有周 
 */
export interface MonthWeek {
  /**
   * 月
   */
  month: number;
  /**
   * 按周分组的日期，7天一组
   */
  weeks: DateInfo[][];
}

通过算法生成数据结构

现在数据结构定义好了，下面该通过算法生成上面数据结构了。

封装获取日期信息方法

/**
 * 获取给定日期的信息。
 * @param date - 要获取信息的日期。
 * @param isCurMonth - 可选参数，指示日期是否在当前月份。
 * @returns 包含有关日期的各种信息的对象。
 */
export const getDateInfo = (date: Date, isCurMonth?: boolean): DateInfo => {
  // 从给定日期创建 农历 对象
  const lunar = Lunar.fromDate(date);

  // 获取 Lunar 对象中的农历日、月和年
  const cnDay = lunar.getDayInChinese();
  const cnMonth = lunar.getMonthInChinese();
  const cnYear = lunar.getYearInChinese();

  // 获取农历节日
  const festivals = lunar.getFestivals();

  // 获取 Lunar 对象中的节气
  const jieQi = lunar.getJieQi();

  // 从日期对象中获取年、月和日
  const year = date.getFullYear();
  const month = date.getMonth();
  const day = date.getDate();

  // 创建包含日期信息的对象
  return {
    year,
    month,
    day,
    date,
    cnDay,
    cnMonth,
    cnYear,
    jieQi,
    isCurMonth,
    week: date.getDay(),
    festivalName: festivals?.[0] || festivalMap[`${month + 1}-${day}`],
  };
};

上面使用了lunar-typescript库，获取了一些农历信息，节气和农历节日。方法第二个参数isCurMonth是用来标记是否是当月的，因为很多月的第一周或最后一周都会补一些其他月日期。

把月日期按照每周7天格式化

思路是先获取给定月的第一天是星期几，如果前面有空白，用上个月日期填充，然后遍历当月日期，把当月日期填充到数组中，如果后面有空白，用下个月日期填充。

/**
 * 返回给定年份和月份的周数组。
 * 每个周是一个天数数组。
 *
 * @param year - 年份。
 * @param month - 月份 (0-11)。
 * @param weekStartDay - 一周的起始日 (0-6) (0: 星期天, 6: 星期六)。
 * @returns 给定月份的周数组。
 */
const getMonthWeeks = (year: number, month: number, weekStartDay: number) => {
  // 获取给定月份的第一天
  const start = new Date(year, month, 1);

  // 这里为了支持周一或周日在第一天的情况，封装了获取星期几的方法
  const day = getDay(start, weekStartDay);

  const days = [];

  // 获取给定月份的前面的空白天数，假如某个月第一天是星期3，并且周日开始，那么这个月前面的空白天数就是3
  // 如果是周一开始，那么这个月前面的空白天数就是2
  // 用上个月日期替换空白天数
  for (let i = 0; i < day; i += 1) {
    days.push(getDateInfo(new Date(year, month, -day + i + 1)));
  }

  // 获取给定月份的天数
  const monthDay = new Date(year, month + 1, 0).getDate();

  // 把当月日期放入数组
  for (let i = 1; i <= monthDay; i += 1) {
    days.push(getDateInfo(new Date(year, month, i), true));
  }

  // 获取给定月份的最后一天
  const endDate = new Date(year, month + 1, 0);
  // 获取最后一天是星期几
  const endDay = getDay(endDate, weekStartDay);

  // 和前面一样，如果有空白位置就用下个月日期补充上
  for (let i = endDay; i <= 5; i += 1) {
    days.push(getDateInfo(new Date(year, month + 1, i - endDay + 1)));
  }

  // 按周排列
  const weeks: DateInfo[][] = [];
  for (let i = 0; i < days.length; i += 1) {
    if (i % 7 === 0) {
      weeks.push(days.slice(i, i + 7));
    }
  }

  // 默认每个月都有6个周，如果没有的话就用下个月日期补充。
  while (weeks.length < 6) {
    const endDate = weeks[weeks.length - 1][6];
    weeks.push(
      Array.from({length: 7}).map((_, i) => {
        const newDate = new Date(endDate.date);
        newDate.setDate(newDate.getDate() + i + 1)
        return getDateInfo(newDate);
      })
    );
  }
  return weeks;
};

getDay方法实现

function getDay(date: Date, weekStartDay: number) {
  // 获取给定日期是星期几
  const day = date.getDay();
  // 根据给定的周开始日，计算出星期几在第一天的偏移量
  if (weekStartDay === 1) {
    if (day === 0) {
      return 6;
    } else {
      return day - 1;
    }
  }
  return day;
}

获取一年的月周数据

/**
 * 获取年份的所有周，按月排列
 * @param year 年
 * @param weekStartDay 周开始日 0为周日 1为周一
 * @returns
 */
export const getYearWeeks = (year: number, weekStartDay = 0): MonthWeek[] => {
  const weeks = [];
  for (let i = 0; i <= 11; i += 1) {
    weeks.push({month: i, weeks: getMonthWeeks(year, i, weekStartDay)});
  }
  return weeks;
};

页面

页面布局使用了grid和table，使用grid布局让一行显示4个，并且会自动换行。日期显示使用了table布局。

如果想学习grid布局，推荐这篇文章。

工作日历日期分为三种类型，工作日、休息日、节假日。在渲染单元格根据不同的日期类型，渲染不同背景颜色用于区分。

维护日期类型

背景

虽然节假日信息可以从网上公共api获取到，但是我们的业务希望可以自己调整日期类型，这个简单给单元格加一个点击事件，点击后弹出一个框去维护当前日期类型，但是业务希望能支持框选多个日期，然后一起调整，这个就稍微麻烦一点，下面给大家分享一下我的做法。

实现思路

实现框选框

定义一个fixed布局的div，设置背景色和边框颜色，背景色稍微有点透明。监听全局点击事件，记录初始位置，然后监听鼠标移动事件，拿当前位置减去初始位置就是宽度和高度了，初始位置就是div的left和top。

获取框选框内符合条件的dom元素

当框选框位置改变的时候，获取所有符合条件的dom元素，然后通过坐标位置判断dom元素是否和框选框相交，如果相交，说明被框选了，把当前dom返回出去。

判断两个矩形是否相交

interface Rect {
  x: number;
  y: number;
  width: number;
  height: number;
}

export function isRectangleIntersect(rect1: Rect, rect2: Rect) {
  // 获取矩形1的左上角和右下角坐标
  const x1 = rect1.x;
  const y1 = rect1.y;
  const x2 = rect1.x + rect1.width;
  const y2 = rect1.y + rect1.height;

  // 获取矩形2的左上角和右下角坐标
  const x3 = rect2.x;
  const y3 = rect2.y;
  const x4 = rect2.x + rect2.width;
  const y4 = rect2.y + rect2.height;

  // 如果 `rect1` 的左上角在 `rect2` 的右下方（即 `x1 < x4` 和 `y1 < y4`），并且 `rect1` 的右下角在 `rect2` 的左上方（即 `x2 > x3` 和 `y2 > y3`），那么这意味着两个矩形相交，函数返回 `true`。
  // 否则，函数返回 `false`，表示两个矩形不相交。
  if (x1 < x4 && x2 > x3 && y1 < y4 && y2 > y3) {
    return true;
  } else {
    return false;
  }
}

具体实现

框选框组件实现

import { useEffect, useRef, useState } from 'react';

import { createPortal } from 'react-dom';
import { isRectangleIntersect } from './utils';

interface Props {
  selectors: string;
  sourceClassName: string;
  onSelectChange?: (selectDoms: Element[]) => void;
  onSelectEnd?: () => void;
  style?: React.CSSProperties,
}

function BoxSelect({
  selectors,
  sourceClassName,
  onSelectChange,
  style,
  onSelectEnd,
}: Props) {

  const [position, setPosition] = useState({ top: 0, left: 0, width: 0, height: 0 });

  const isPress = useRef(false);

  const startPos = useRef<any>();

  useEffect(() => {
    // 滚动的时候，框选框位置不变，但是元素位置会变，所以需要重新计算
    function scroll() {
      if (!isPress.current) return;
      setPosition(prev => ({ ...prev }));
    }

    // 鼠标按下，开始框选
    function sourceMouseDown(e: any) {
      isPress.current = true;
      startPos.current = { top: e.clientY, left: e.clientX };
      setPosition({ top: e.clientY, left: e.clientX, width: 1, height: 1 })
      // 解决误选择文本情况
      window.getSelection()?.removeAllRanges();
    }
    // 鼠标移动，移动框选
    function mousemove(e: MouseEvent) {
      if (!isPress.current) return;

      let left = startPos.current.left;
      let top = startPos.current.top;
      const width = Math.abs(e.clientX - startPos.current.left);
      const height = Math.abs(e.clientY - startPos.current.top);

      // 当后面位置小于前面位置的时候，需要把框的坐标设置为后面的位置
      if (e.clientX < startPos.current.left) {
        left = e.clientX;
      }

      if (e.clientY < startPos.current.top) {
        top = e.clientY;
      }

      setPosition({ top, left, width, height })
    }

    // 鼠标抬起
    function mouseup() {

      if(!isPress.current) return;

      startPos.current = null;
      isPress.current = false;
      // 为了重新渲染一下
      setPosition(prev => ({ ...prev }));

      onSelectEnd && onSelectEnd();
    }

    const sourceDom = document.querySelector(`.${sourceClassName}`);

    if (sourceDom) {
      sourceDom.addEventListener('mousedown', sourceMouseDown);
    }

    document.addEventListener('scroll', scroll);
    document.addEventListener('mousemove', mousemove);
    document.addEventListener('mouseup', mouseup);

    return () => {
      document.removeEventListener('scroll', scroll);
      document.removeEventListener('mousemove', mousemove);
      document.removeEventListener('mouseup', mouseup);

      if (sourceDom) {
        sourceDom.removeEventListener('mousedown', sourceMouseDown);
      }
    }
  }, [])

  useEffect(() => {
    const selectDoms: Element[] = [];
    const boxes = document.querySelectorAll(selectors);
    (boxes || []).forEach((box) => {
      // 判断是否在框选区域
      if (isRectangleIntersect({
        x: position.left,
        y: position.top,
        width: position.width,
        height: position.height,
      },
        box.getBoundingClientRect()
      )) {
        selectDoms.push(box);
      }
    });
    onSelectChange && onSelectChange(selectDoms);
  }, [position]);


  return createPortal((
    isPress.current && (
      <div
        className='fixed bg-[rgba(0,0,0,0.2)]'
        style={{
          border: '1px solid #666',
          ...style,
          ...position,
        }}
      />)
  ), document.body)
}


export default BoxSelect;

使用框选框组件，并在框选结束后，给框选日期设置类型

import { Modal, Radio } from 'antd';
import { useEffect, useMemo, useRef, useState } from 'react';
import BoxSelect from './box-select';
import WorkCalendar from './work-calendar';

import './App.css';

function App() {

  const [selectDates, setSelectDates] = useState<string[]>([]);
  const [open, setOpen] = useState(false);
  const [dateType, setDateType] = useState<number | null>();
  const [dates, setDates] = useState<any>({});

  const selectDatesRef = useRef<string[]>([]);

  const workDays = useMemo(() => {
    return Object.keys(dates).filter(date => dates[date] === 1)
  }, [dates])

  const restDays = useMemo(() => {
    return Object.keys(dates).filter(date => dates[date] === 2)
  }, [dates]);

  const holidayDays = useMemo(() => {
    return Object.keys(dates).filter(date => dates[date] === 3)
  }, [dates]);

  useEffect(() => {
    selectDatesRef.current = selectDates;
  }, [selectDates]);

  return (
    <div>
      <WorkCalendar
        defaultWeekStartDay={0}
        workDays={workDays}
        holidayDays={holidayDays}
        restDays={restDays}
        selectDates={selectDates}
        year={new Date().getFullYear()}
      />
      <BoxSelect
        // 可框选区域
        sourceClassName='work-calendar'
        // 可框选元素的dom选择器，
        selectors='td.date[data-date]'
        // 框选元素改变时的回调，可以拿到框选中元素
        onSelectChange={(selectDoms) => {
          // 内部给td元素上设置了data-date属性，这样就可以从dom元素上拿到日期
          setSelectDates(selectDoms.map(dom => dom.getAttribute('data-date') as string))
        }}
        // 框选结束事件
        onSelectEnd={() => {
          // 如果有框选就弹出设置弹框
          if (selectDatesRef.current.length) {
            setOpen(true)
          }
        }}
      />
      <Modal
        title="设置日期类型"
        open={open}
        onCancel={() => {
          setOpen(false);
          setSelectDates([]);
          setDateType(null);
        }}
        onOk={() => {
          setOpen(false);
          selectDatesRef.current.forEach(date => {
            setDates((prev: any) => ({
              ...prev,
              [date]: dateType,
            }))
          })
          setSelectDates([]);
          setDateType(null);
        }}
      >
        <Radio.Group
          options={[
            { label: '工作日', value: 1 },
            { label: '休息日', value: 2 },
            { label: '节假日', value: 3 },
          ]}
          value={dateType}
          onChange={e => setDateType(e.target.value)}
        />
      </Modal>
    </div>
  )
}

export default App

工作日历改造

给td的class里加了个date，并且给元素上加了个data-date属性

如果被框选，改变一下背景色

效果展示

小结

本来想给mousemove加节流函数，防止触发太频繁影响性能，后面发现不加节流很流畅，加了节流后因为延迟，反而不流畅了，后面如果有性能问题，再优化吧。

作者：前端小付
链接：https://juejin.cn/post/7308948738659155983

在线咨询

上一篇：HTML表格标签的使用方法与示例
下一篇：HTML 列表

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

日历签到和积分累计的php实现方法

景

效果展示

开始之前

lunar-typescript

复习Date Api

new Date

获取星期几

获取上个月最后一天

获取某个月有多少天

日期加减

比较两个日期

实战

数据结构

通过算法生成数据结构

封装获取日期信息方法

把月日期按照每周7天格式化

getDay方法实现

获取一年的月周数据

页面

维护日期类型

背景

实现思路

实现框选框

获取框选框内符合条件的dom元素

判断两个矩形是否相交

具体实现

框选框组件实现

使用框选框组件，并在框选结束后，给框选日期设置类型

工作日历改造

效果展示

小结

您的项目需求