JavaScript日历制作并实现拖动选择日期

最新推荐文章于 2024-05-07 12:01:10 发布

JYeontu

最新推荐文章于 2024-05-07 12:01:10 发布

阅读量1k

点赞数 2

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/Twinkle_sone/article/details/118673058

版权

JavaScript 专栏收录该内容

223 篇文章 3 订阅

订阅专栏

效果展示

在这里插入图片描述

代码

html

<html 
	onmouseup="mouseup(event)"
	onmousedown="mousedown(event)"
	onmousemove="mouseover(event)">
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="timetable"></div>
		<button id="clear">清空</button>
		<div id="showSelected"></div>
		<input id="yearInput" placeholder="年份" style="line-height: 2rem; width: 50%;margin-left: 25%;margin-bottom: 1rem;"/>
		<input id="monthInput" placeholder="月份" style="line-height: 2rem; width: 50%;margin-left: 25%;margin-bottom: 1rem;"/>
		<button id="confirm" style="height:2rem; width:10rem;margin: 0 auto;">确认</button>
	</body>
</html>

css

body{
	display: flex;
	flex-direction: column;
}
#timetable{
	justify-content: center;
	align-items: center;
	align-content: center;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	margin: 0 auto;
	margin-top: 10rem;
}
#timetable .tr{
	display: flex;
	flex: row;
}
#timetable .tr .cell{
	border: #000000 1px solid;
	height: 2.5rem;
	line-height: 2.5rem;
	text-align: center;
	width: 2rem;
}
#timetable .tr .title{
	border: #000000 1px solid;
	height: 2.5rem;
	line-height: 2.5rem;
	text-align: center;
	width: 2rem;
	background-color: bisque;
}
#clear{
	justify-content: center;
	align-items: center;
	align-content: center;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	margin: 2rem auto;
}
#showSelected{
	text-align: center;
	margin: 0 auto;
	width: 80%;
}
.selected{
	background-color: grey !important;
}
.today{
	background-color: cornflowerblue;
}

JavaScript

//定义行数、列数和天数
var hang = 6,lie = 7,days = 30,year = new Date().getFullYear() ,month = new Date().getMonth() + 1,day = new Date().getDate();
//鼠标按下和抬起的坐标
var startX1 = 0,startY1 = 0,endX1 = 0,endY1 = 0,flag = false;
var weekday = ["日", "一", "二", "三", "四", "五", "六"];

//判断润年
function isLeapYear(year){
	if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) return true;//2月份29日
	return false;
}
//判断日期的星期
function monthStartWeek(date){
	console.log(date);
	let ind = new Date(date).getDay();
	return ind;
}
//获取天数
function getDays(){
	if(month == 2){
		days = 28;
		if(isLeapYear(year)) days = 29;
	}else if([1,3,5,7,8,10,12].indexOf(parseInt(month)) != -1){
		days = 31;
	}else{
		days = 30;
	}
}
getDays();

//确定按钮
let confirm = document.getElementById('confirm');
confirm.onclick =function(){
	year = document.getElementById('yearInput').value;
	month = document.getElementById('monthInput').value;
	getDays();
	// let ind = monthStartWeek(year + '-' + month + '-1');
	let ind = new Date(year + '-' + month + '-01').getDay();
	drawTable(ind);
}

//绘制表格
function drawTable(ind){
	console.log('111111111',ind);
	let timetable = document.getElementById('timetable');
	timetable.innerHTML = "";
	//-------------表头------------
	let tr = document.createElement('div');
	tr.classList.add('tr');
	for(let i = 0; i < lie; i++){
		let node = document.createElement('div');
		let text = weekday[i];
		node.innerText = text;
		node.classList.add('title');
		tr.appendChild(node); 
	}
	timetable.appendChild(tr);
	//-----------------
	console.log('year',year,'month',month,'days',days);
	for(let i = 0; i < hang; i++){
		let tr = document.createElement('div');
		tr.classList.add('tr');
		for(let j = 0; j < lie; j++){
			let text = i * lie + j - ind + 1;
			let node = document.createElement('div');
			if(text == day) node.classList.add('today');
			if(text > 0) node.innerText = text;
			node.classList.add('cell');
			tr.appendChild(node); 
			if(text >= days){
				timetable.appendChild(tr);
				return;
			} 
		}
		timetable.appendChild(tr); 
	}
}

drawTable(new Date(year + '-' + month + '-01').getDay());

//监听鼠标按下
function mousedown(e) {
	// console.log('down');
	startX1 = e.x;
	startY1 = e.y;
	flag = true;
}
//监听鼠标抬起
function mouseup(e) {
	select(e.x,e.y);
	flag = false;
}
//监听鼠标移动
function mouseover(e){
	//判断鼠标是不是为按压状态
	if(!flag) return;
	select(e.x,e.y);
}
//选择区间
function select(x,y){
	endX1 = x;
	endY1 = y;
	let timetable = document.getElementById('timetable');
	//获取小格子的宽高、表格的宽高
	let cell = document.getElementsByClassName('cell')[0];
	let cellH = cell.offsetHeight,
		cellW = cell.offsetWidth,
		tableL = timetable.getBoundingClientRect().left,
		tableT = timetable.getBoundingClientRect().top,
		tableR = timetable.getBoundingClientRect().right,
		tableB = timetable.getBoundingClientRect().bottom;
	tableR = tableL + lie * cellW;
	tableB = tableT + hang * cellH;
	//小的为开始坐标、大的为结束坐标
	let startX = Math.min(startX1,endX1),
		startY = Math.min(startY1,endY1),
		endX = Math.max(startX1,endX1),
		endY = Math.max(startY1,endY1);
	//转换为数组下标
	let indsx = Math.max(Math.floor((startX - tableL)/cellW),0);
	let indsy = Math.max(Math.floor((startY - tableT)/cellH),0);
	let index = Math.min(Math.floor((endX - tableL)/cellW),lie - 1);
	let indey = Math.min(Math.floor((endY - tableT)/cellH),hang);
	let tr = timetable.children;
	
	//将选择的内容展示出来
	let showSelected = document.getElementById('showSelected');
	let showtext = [];
	
	//循环找出当前选中的区域并做上标记，并将未选中的区域标记去除
	for(let i = 0; i < tr.length; i++){
		let td = tr[i].children;
		for(let j = 0; j < td.length; j++){
			if(i >= indsy && i <= indey && j >=indsx && j <= index){
				if(td[j].innerText.length == 0) continue;
				if(i > 0) td[j].classList.add('selected');
				if(i > 0) showtext.push(td[j].innerText);
			}else{
				td[j].classList.remove('selected')
			}
		}
	}
	showSelected.innerText = showtext.join('、');
}

//清空选择区域
var clear = document.getElementById("clear"); 
clear.onclick =function(){
	console.log('清空');
	let timetable = document.getElementById('timetable');
	let tr = timetable.children;
	for(let i = 0; i < tr.length; i++){
		let td = tr[i].children;
		for(let j = 0; j < td.length; j++){
			td[j].classList.remove('selected');
		}
	}
}

…………
Gitee地址：https://gitee.com/zheng_yongtao/html-css-js-Achieve-cool-results.git

JYeontu

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript日历制作并实现拖动选择日期

效果展示代码html<div id="timetable" onmouseup="mouseup(event)" onmousedown="mousedown(event)" onmousemove="mouseover(event)" ></div><button id="clear">清空</button>css#timetable{ width: 21.875rem; height: 8.125rem; -webki
复制链接

扫一扫