成果展现
代码
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