利用JS制作万年历

利用JS制作万年历

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

1.HTML布局:

<div id="calendar">
    <div id="month_year">
        <select id="year">select>年
        <select id="month">select>月
    div>
    <ul id="title">
        <li>星期日li>
        <li>星期一li>
        <li>星期二li>
        <li>星期三li>
        <li>星期四li>
        <li>星期五li>
        <li>星期六li>
    ul>
    <ul id="datesUl">ul>
div>

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的函数

<script>
    var yearSelect = document.getElementById('year');
    var monthSelect = document.getElementById('month');
    var datesUl = document.getElementById('datesUl');
    //初始化
    function init(){
        for(var year=1990;year<3000;year++){        //初始化俩个选项卡
            createOption(year,year,yearSelect);
        }
        for(var month=1;month<13;month++){
            createOption(month,month,monthSelect);
        }
        var now = new Date();                       //获取当前的日期
        showSelect(now.getFullYear(),now.getMonth()+1);   //引用显示选项卡的函数

        showDates();                                    //调用显示日期的函数

        yearSelect.onchange=function(){                 //当选项卡改变时
            showDates();
        };
        monthSelect.onchange=function(){
            showDates();
        }
    }
    init();                        //调用初始化函数     
    //创建option的函数
    function createOption(text,value,parent){
        var option = document.createElement('option');
        option.innerHTML = text;
        option.value = value;
        parent.appendChild(option);
    }
    //获取当前的日期并显示在选项卡中
    function showSelect(year,month){
        yearSelect.value = year;
        monthSelect.value = month;
    }
    //获取选择的年月的第一天是星期几
    function getDays(year,month){
        var d = new Date(year,month,1);
        return d.getDay();
    }
    //根当前的select中的年和月来显示日期
    function showDates(){
        datesUl.innerHTML= "";
        var year = yearSelect.value;
        var month = monthSelect.value;
        //创建空的li
        for(var i=0;i"",datesUl);
        }
        //创建有日期的li
        for(var j=1;j<=getDatesOfMonth(year,month);j++){
            createLi(j,datesUl);
        }
    }
    //创建li并添加至对应的容器
    function createLi(text,parent){
        var li = document.createElement('li');
        li.innerHTML = text;
        parent.appendChild(li);
    }
    //创建一个输入年月计算出这个月有几天的函数
    function getDatesOfMonth(year,month){
        var d = new Date(year,month,0);
        return d.getDate();
    }
script>