效果展示
代码
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
