欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

一个简单的日历

程序员文章站 2022-05-07 21:54:40
...
<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>

相关标签: 日历