一个简单的日历

<script>
function createCalendar(obj){

    let day = null ;
    let lastDay = null ;
    let nowLastDay = null ;
    let year = null ;
    let month = null ;

    //创建总框
    let div = document.createElement('div') ;
    div.style.userSelect = 'none' ;
    div.id = 'cal' ;
    div.style.position = 'absolute' ;
    div.style.top = obj.top + 'px' ;
    div.style.left = obj.left + 'px' ;
    div.style.width = obj.width + 'px' ;
    div.style.height = obj.height + 'px' ;
    div.style.border = `1px solid ${obj.borderColor}` ;
    div.style.borderRadius = '3px' ;
    document.body.appendChild(div) ;

    let cal = document.getElementById('cal') ;
    //创建头部
    let header = document.createElement('header') ;
    header.style.height = '10%' ;
    header.style.borderBottom = `1px solid ${obj.borderColor}` ;
    header.style.color = '#ddd' ;
    header.style.fontSize = `${obj.width/16}px` ;
    header.style.paddingTop = '2.5%' ;
    div.appendChild(header) ;

    //获取时间
    let newDate = new Date() ;
    //当前日期
    let nowDays = newDate.getDate() ;
    //当前年
    let nowYears = newDate.getFullYear() ;
    //当前月
    let nowMonths = newDate.getMonth() + 1 ;


    setTime(newDate) ;


    let data = ['日','一','二','三','四','五','六'] ;

    //头部内容
    header.innerHTML = `<span>${year}</span> 年 <span>${month}</span> 月 <span class="prev"><</span><span class="next"> > </span>` ;
    let spans = cal.getElementsByTagName('span') ;
    for(let i = 0,len = spans.length ; i < len ; i++){
        spans[i].style.display = 'inline-block' ;
        spans[i].style.verticalAlign = 'top' ;
        if(i === 2 || i === 3){
            spans[i].style.cursor = 'pointer' ;
            changeColor(spans[i]) ;
        }
    }
    //年月日的样式
    spans[0].style.marginLeft = '12px' ;
    spans[1].style.color = '#888888' ;
    spans[2].style.float = 'right' ;
    spans[3].style.float = 'right' ;

    spans[2].style.marginRight = '46px' ;
    spans[3].style.marginRight = '-46px' ;

    //创建内容区域
    let footer = document.createElement('footer') ;
    footer.style.position = 'relative' ;

    div.appendChild(footer) ;


    footer.innerHTML = `<div class="nowDay" style="height: ${(1/7)*obj.width}px;position: relative;"></div><div class="nowDate" style="width:100%;height: ${(6/7)*obj.width}px;position: absolute;top:${(1/7)*obj.width}px;left: 0; "></div>` ;


    let _nowDay = cal.getElementsByClassName('nowDay')[0] ;
    let _nowDate = cal.getElementsByClassName('nowDate')[0] ;

    _nowDay.innerHTML = createSpan(7) ;
    _nowDate.innerHTML = createSpan(42) ;
    

    let spans1 = _nowDay.getElementsByTagName('span') ;
    for(let i = 0 ,len = spans1.length ; i < len ; i++){
        spans1[i].innerHTML = data[i] ;
    }


    let next = cal.getElementsByClassName('next')[0] ;
    let prev = cal.getElementsByClassName('prev')[0] ;

    next.onclick = function(){
        createNext() ;
    } ;

    prev.onclick = function(){
        createPrev();
    };

    createThisMonth() ;
    function createThisMonth() {

        let spans = _nowDate.getElementsByTagName('span') ;

        for(let i = 0 ,len = spans.length ; i < len ; i++){
            spans[i].style.backgroundColor = 'white' ;
            if (i < day){
                spans[i].innerText = nowLastDay - day + i  + 1 ;
                spans[i].style.color = '#ccc' ;
            }
            if (i >=  day && i < lastDay  + day ){
                spans[i].innerText = i - (day) + 1;
                spans[i].style.color = 'black' ;
                if(year === nowYears && month === nowMonths && parseFloat(spans[i].innerText) === nowDays){
                    spans[i].style.backgroundColor = 'pink' ;
                }
            }
            if (i >= lastDay +  day) {
                spans[i].innerText = i - (lastDay  + day) + 1 ;
                spans[i].style.color = '#ccc' ;
            }
        }
    }

    function changeColor(obj) {
        obj.addEventListener('mouseenter',function () {
            this.style.color = '#888888' ;
        }) ;
        obj.addEventListener('mouseleave',function () {
            this.style.color = '#dddddd' ;
        }) ;
    }
    //设置时间
    function setTime(times) {
        year = times.getFullYear() ;
        month = times.getMonth()+1 ;
        //获取本月1号日期是星期几
        times.setDate(1) ;
        day = times.getDay() ;
        //获取下个月的0号是多少即本月的最后一天
        times.setMonth(month) ;
        times.setDate(0) ;
        lastDay = times.getDate() ;
        //获取上个月的最后一天
        times.setDate(0) ;
        nowLastDay = times.getDate() ;
    }
    //生成内容
    function createSpan(num) {
        let str = '' ;
        for(let i = 0 ; i < num ; i++){
            str += `<span style="display: inline-block;width: ${obj.width/7}px;height: ${obj.width/7}px;position: absolute;top: ${Math.floor(i/7)*(obj.width/7)}px;background-color: white;border-radius: 50%;text-align: center;line-height: ${obj.width/7}px;font-size: 12px;color: black;left: ${(i%7)*(obj.width/7)}px;"></span>` ;
        }
        return str ;
    }
    //下个月
    function createNext() {
        let nowMonth = parseFloat(spans[1].innerText) ;
        let nowYear = parseFloat(spans[0].innerText) ;
        if (nowMonth === 12){
            nowYear += 1 ;
            nowMonth = 0 ;
        }
        let date = new Date() ;
        date.setFullYear(nowYear) ;
        date.setMonth(nowMonth) ;
        setTime(date) ;

        createThisMonth() ;
        spans[1].innerHTML = nowMonth+1 ;
        spans[0].innerHTML = nowYear ;
    }

    function createPrev() {
        spans[1].innerText = parseFloat(spans[1].innerText) - 1;

        let nowMonth = parseFloat(spans[1].innerText);
        let nowYear = parseFloat(spans[0].innerText) ;
        if(nowMonth === 0){
            spans[1].innerText = 12 ;
            spans[0].innerText = nowYear - 1;
        }

        let date = new Date() ;
        date.setMonth(nowMonth-1) ;
        date.setFullYear(nowYear) ;
        setTime(date) ;
        createThisMonth() ;
    }
}
createCalendar({
    left:100,
    top:100,
    width:325,
    height:380,
    borderColor:'#ccc'
}) ;
</script>