js万年历

最新推荐文章于 2022-12-10 11:29:06 发布

gengyunzhao

最新推荐文章于 2022-12-10 11:29:06 发布

阅读量533

点赞数 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>万年历</title>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }


        #box {
            margin: 50px auto;
            width: 500px;
            height: 300px;
            border: 1px solid deepskyblue;
            border-radius: 4px;
        }

        #top {
            padding: 20px;
            border-bottom: 2px solid dodgerblue;
        }

        #top select {
            margin-right: 10px;
        }

        #top #query {
            width: 60px;
            margin-left: 20px;
        }

        #con {
            width: 100%;
        }

        #con #week {
            width: 100%;
        }

        #week li {
            display: inline-block;
            width: 13%;
            font-size: 14px;
            font-family: "微软雅黑";
            text-align: center;
        }
        #con #day{
            width: 100%;
        }
        #day li{
            display: inline-block;
            width: 13%;
            text-align: center;
        }

    </style>
</head>
<body>
<div id="box">
    <div id="top">
        <select name="year" id="year">
            <option value="">请选择年份</option>
        </select>
        <label for="year">年</label>

        <select name="month" id="month" title="月">
            <option value="">请选择月份</option>
        </select>
        <label for="month">月</label>
        <button id="query">查询</button>
    </div>
    <div id="con">
        <ul id="week">
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
            <li>日</li>
        </ul>
        <ul id="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>
<script>
    window.onload = function () {
        var listYear = document.getElementById("year");
        var listMonth = document.getElementById("month");
        var btn_query = document.getElementById("query");
        var dayList = document.getElementById("day").getElementsByTagName("li");

        /*添加年*/
        for (var i = 1995; i < 2018; i++) {
            var option = document.createElement("option");
            option.value = i;
            option.innerHTML = i;
            listYear.appendChild(option);
        }

        /*添加月*/
        for (var j = 1; j < 13; j++) {
            var newOption = document.createElement("option");
            newOption.value = j;
            newOption.innerHTML = j;
            listMonth.appendChild(newOption);
        }

        /*判断是否为闰年*/
        /*公元年数能被4整除但不能被100整除或者能被400整除的为闰年其他为平年*/
        function isLeap(year) {
            /*用res标记0为平年，1为闰年*/
            var res = 0;
            if (year % 100 == 0) {
                if (year % 400 == 0) {
                    res = 1;
                } else {
                    res = 0;
                }
            } else {
                if (year % 4 == 0) {
                    res = 1
                } else {
                    res = 0;
                }
            }
            return res;

        }

        /*存储一个月的天数数组*/
        var m_day = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

        btn_query.addEventListener("click", a);
        function a() {
            /*清空上一个月残留的数字*/
            for(var i =0;i<dayList.length;i++){
                dayList[i].innerHTML='';
            }

            if (listYear.value == '' || listMonth.value == '') {
                alert("请选择年份或月份")
            } else {
                var year = parseInt(listYear.value);
                /*默认日期的月份是从0月开始的，而获取的月份的值是从1开始的，因此要减一*/
                var month = parseInt(listMonth.value)-1;
                if (isLeap(year) == 1) {
                    m_day[1] = 29;
                } else if (isLeap(year) == 0) {
                    m_day[1] = 28;
                }
                /*获取某年某月的第一天，直接使用初始化日期的方法初始化这一天*/
                var someDay =new Date(year,month,1);

                /*获取每个月的第一天是星期几*/
                var firtDay = someDay.getDay();

                /*这里的month已经减1了*/
                for(var i =0;i<m_day[month];i++){
                    /*判断每个月的第一天是不是星期天，如果是从第二行显示*/
                    if (firtDay==1){
                        dayList[i+firtDay+6].innerHTML=i+1;
                    }else if (firtDay==0){
                        dayList[i+firtDay+6].innerHTML=i+1;
                    }else{
                        dayList[i+firtDay-1].innerHTML=i+1;
                    }
                }

            }
        }
    }
</script>
</body>
</html>

gengyunzhao

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js万年历

html>html lang="en">head> meta charset="UTF-8"> title>万年历title> style> * { list-style: none; margin: 0; padding: 0; } #box {
复制链接

扫一扫