其他分享
首页 > 其他分享> > js 万年历实现

js 万年历实现

作者:互联网

直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js---万年历</title>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
            list-style-type:none;
        }
        #box{
            width:450px;
            height:380px;
            border:2px solid #3399ff;
            margin:100px auto 0px;
            border-radius:5px;
        }
        #top{
            width:100%;
            height:50px;
            border-bottom:1px solid #3399ff;
            font-size:15px;
        }
        #year{
            margin:15px 10px;

        }
        #year,#month{
            text-align:center;
            margin-right:15px;
        }
        #con{
            width:420px;
            height:300px;
            margin:0px auto 0px;
        }
        #con ul.week{
            width:420px;
            height:45px;
        }
        #con ul.week li{
            width:60px;
            height:45px;
            line-height:45px;
            text-align:center;
            float:left;
        }
        #con ul.week li.weekend{color:red}
        #con ul.day li{
            width:60px;
            height:45px;
            border-top:1px solid #ddd;
            float:left;
            line-height:50px;
            text-align:center;
            font-size:20px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="top">
            <select name="query-year" id="year">
                <option value="">Select year</option>
            </select>年
            <select name="query-month" id="month">
                <option value="">Select month</option>
            </select>月
            <button style="width:60px;margin-left:20px;" id="inquriy" onclick="query()">query</button>
        </div>
        <div id="con">
            <ul class="week">
                <li class="weekend">日</li>
                <li>一</li>
                <li>二</i>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li class="weekend">六</li>
            </ul>
            <ul class="day">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript">
    /* 
       1 自动生成年份和月份;
       2 默认当前年月;
    */
    var oYear = document.getElementById('year');
    var oMonth = document.getElementById('month');
    var oday = document.querySelector('.day');
    var oLi = document.querySelectorAll('.day li');
    var curDate = new Date();
    // 年份
    eachFor(1900,2051,function(val){
        var option = document.createElement("option");
        option.innerHTML = val;
        option.value = val;
        if(curDate.getFullYear() == val){
            option.selected = true;
        }
        oYear.appendChild(option);
    });
    // 月份
    eachFor(0,11,function(val){
        var option = document.createElement("option");
        option.innerHTML = parseInt(val) +1;
        option.value = val;
        if(curDate.getMonth() == val){
            option.selected = true;
        }
        oMonth.appendChild(option);
    });

    // 对函数的封装应该考虑掺入的参数,大小类型等
    function eachFor(start, end, callback){
        for(var i = start; i <= end ; i++){
            callback(i);
        }
    }
    function query(){
        var year = oYear.value ;
        var month = oMonth.value ; 
        // console.log(year +"--"+month);
        // oday.innerHTML = '';
        if(year && month){
            console.log(year +"--"+month);
            // 获取月份的第一天
            var firstDate = new Date(year,month,1);
            // 第一天对应是周几
            var dayOfWeek = firstDate.getDay();
            // 该月份有多少天
            var conutDay =  getMonthDays(year,month);
            console.log("countDay="+conutDay);
            oLi.forEach(function(el,index){
                el.innerHTML = '';
            })
            eachFor(1,conutDay,function(val){
                oLi[dayOfWeek + val - 1].innerHTML = val;
            });
        }else{
            alert('请先选择年份和月份');
        }
    }
    // 是否为闰年 整百年份必须被400整除 非整百年份被4整除就都是闰年
    function getMonthDays(year,month){
        var datas = [];
        if(year%400 ==0 || (year%4==0 && year%100!=0)){
            // console.log(year + '是闰年');
            datas = [31,29,31,30,31,30,31,31,30,31,30.31];
        
        }else{
            // console.log(year + '不是闰年');
            datas = [31,28,31,30,31,30,31,31,30,31,30.31];
        }
        console.log(year +"--"+ month +"--"+ datas[month]);
        return datas[month];
    }
    // 初始默认当前时间的年和月进行搜索
    query();
</script>
</html>

只是简单实现,还有很多需要完善的地方;

标签:document,option,val,实现,js,height,width,var,万年历
来源: https://www.cnblogs.com/xhliang/p/10797361.html