JavaScript日历制作并实现拖动选择日期
效果展示
文章图片
代码
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');
}
}
}【JavaScript日历制作并实现拖动选择日期】…………
Gitee地址：https://gitee.com/zheng_yongtao/html-css-js-Achieve-cool-results.git
推荐阅读
- 事件代理
- 数组常用方法一
- 迅捷流程图制作软件的使用方法！
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- 【读书笔记】JavaScript|【读书笔记】JavaScript DOM编程艺术 （第2版）
- JavaScript判断数组的方法总结与推荐