利用JS制作萬年歷

我們知道,萬年歷在人們的生活中是在平常不過的一種東西了,那么怎樣用JS來實(shí)現(xiàn)在網(wǎng)頁中展示一個(gè)與眾不同萬年歷呢

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.首先在布局上,可以先用一個(gè)id為calender(日歷)的div將你的萬年歷包住,以便我們對(duì)萬年歷的位置進(jìn)行設(shè)置;

2.在這個(gè)大的div中有三部分: 1. month_year 用以設(shè)置年月; 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. 做一些初始化的處理,給倆個(gè)顯示年月的選項(xiàng)卡中添加內(nèi)容便于用戶查找
2. 構(gòu)造一些我們要用到的函數(shù): 如輸入年月計(jì)算出這個(gè)月有幾天,創(chuàng)建添加option及l(fā)i的函數(shù)

<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++){        //初始化倆個(gè)選項(xiàng)卡
            createOption(year,year,yearSelect);
        }
        for(var month=1;month<13;month++){
            createOption(month,month,monthSelect);
        }
        var now = new Date();                       //獲取當(dāng)前的日期
        showSelect(now.getFullYear(),now.getMonth()+1);   //引用顯示選項(xiàng)卡的函數(shù)

        showDates();                                    //調(diào)用顯示日期的函數(shù)

        yearSelect.onchange=function(){                 //當(dāng)選項(xiàng)卡改變時(shí)
            showDates();
        };
        monthSelect.onchange=function(){
            showDates();
        }
    }
    init();                        //調(diào)用初始化函數(shù)     
    //創(chuàng)建option的函數(shù)
    function createOption(text,value,parent){
        var option = document.createElement('option');
        option.innerHTML = text;
        option.value = value;
        parent.appendChild(option);
    }
    //獲取當(dāng)前的日期并顯示在選項(xiàng)卡中
    function showSelect(year,month){
        yearSelect.value = year;
        monthSelect.value = month;
    }
    //獲取選擇的年月的第一天是星期幾
    function getDays(year,month){
        var d = new Date(year,month,1);
        return d.getDay();
    }
    //根當(dāng)前的select中的年和月來顯示日期
    function showDates(){
        datesUl.innerHTML= "";
        var year = yearSelect.value;
        var month = monthSelect.value;
        //創(chuàng)建空的li
        for(var i=0;i<getDays(year,month);i++){
            createLi("",datesUl);
        }
        //創(chuàng)建有日期的li
        for(var j=1;j<=getDatesOfMonth(year,month);j++){
            createLi(j,datesUl);
        }
    }
    //創(chuàng)建li并添加至對(duì)應(yīng)的容器
    function createLi(text,parent){
        var li = document.createElement('li');
        li.innerHTML = text;
        parent.appendChild(li);
    }
    //創(chuàng)建一個(gè)輸入年月計(jì)算出這個(gè)月有幾天的函數(shù)
    function getDatesOfMonth(year,month){
        var d = new Date(year,month,0);
        return d.getDate();
    }
</script>