利用JS制作万年历

利用JS制作万年历

我们知道,万年历在人们的生活中是在平常不过的一种东西了,那么怎样用JS来实现在网页中展示一个与众不同万年历呢

1.HTML布局:

    

        年
        月
    
    

        
星期日
        
星期一
        
星期二
        
星期三
        
星期四
        
星期五
        
星期六
    
    

1.首先在布局上,可以先用一个id为calender(日历)的div将你的万年历包住,以便我们对万年历的位置进行设置;

2.在这个大的div中有三部分: 1. month_year 用以设置年月; 2.title 用以显示星期;

3.detesUl 用以显示具体的日期;

CSS样式:

*{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        #calendar{
            width: 700px;
            background-color: lightgray;
            margin: 20px auto;

        }
        #calendar::after{
            content: "";
            display: block;
            clear: both;
        }
        #month_year{
            width: 700px;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        ul > li{
            float: left;
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
        #datesUl > li:empty{
            opacity: 0;
        }
        #datesUl > li:hover{
            background-color: lightblue;
        }

JS代码:

JS代码分析:

1. 做一些初始化的处理,给俩个显示年月的选项卡中添加内容便于用户查找
2. 构造一些我们要用到的函数: 如输入年月计算出这个月有几天,创建添加option及li的函数