关于javascript:JavaScript日历制作并实现拖动选择日期

59次阅读

共计 4981 个字符，预计需要花费 13 分钟才能阅读完成。

 <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>

 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;}

 // 定义行数、列数和天数
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

正文完

发表至： javascript

2021-08-31

0

关于javascript:22道js输出顺序问题你能做出几道

关于javascript:那些年遇到的刁钻JavaScript面试题可防踩坑

Vue原理Watch-源码版

关于javascript:今天踩了一个基础坑

关于python:Effective-Python

关于python:透析软件开发未来-10-年的-8-个趋势