jQuery 万年历

与君归

已于 2022-02-13 11:50:46 修改

阅读量404

点赞数 1

分类专栏：前端html js jQuery 文章标签： js jquery

于 2021-04-13 08:56:05 首次发布

本文链接：https://blog.csdn.net/fdhfhghjfxb/article/details/115653442

版权

前端html 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

jQuery

1 篇文章 0 订阅

订阅专栏

万年历

万年历.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="万年历.css">
</head>

<body>
    <div class="calender container">
        <button id="btn1">
            < </button>
                <select name="years" id="thisYear">

                </select> 年
                <select name="months" id="thisMonth">

                </select> 月
                <button id="btn2">></button>
                <div>输入年月进行跳转:(2010/12 or 2011-12)</div>
                <input type="text" value="">
                <span>日期格式输入不合格</span>
                <ul class="week_list">
                    <li>星期日</li>
                    <li>星期一</li>
                    <li>星期二</li>
                    <li>星期三</li>
                    <li>星期四</li>
                    <li>星期五</li>
                    <li>星期六</li>
                </ul>
                <ul class="days_list">

                </ul>
    </div>
</body>
</html>

万年历.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  a {
    text-decoration: none;
  }
  
  ul {
    list-style: none;
  }
  
  img {
    vertical-align: bottom;
    border: 0;
  }
  .container {
    width: 600px;
    margin: 0 auto;
  }
  .calender{
    height:600px ;
  }
  .calender ul{
    width:550px;
    display: flex;
    flex-wrap: wrap;
  }
  .calender .week_list li{
    width: 55px;
    height: 55px;
    text-align: center;
    margin-right: 20px;
    border-radius: 50%;
    line-height: 55px;
    background:rgba(12, 11, 11,0.3) ;
  }
  .days_list .li2 {
    width: 55px;
    height: 55px;
    text-align: center;
    margin-right: 20px;
    border-radius: 50%;
    line-height: 55px;
    border:1px solid rosybrown;
   
  }
  .blankLi{
    width: 55px;
    height: 55px;
    text-align: center;
    margin-right: 20px;
    border-radius: 50%;
    line-height: 55px;
    
  }
  span {
    display: none;
    color:red;
  }

万年历.js

<script src="jquery1.9.1.js"></script>
<script>
    function setDefaultDate(year, month) {
        month = (month.toString().length == 1) ? ("0"+month) : month;
        //当前日期 yyyy-MM或yyyy/MM
        return year.toString() + '-' + month || year.toString() + '/' + month;
    }

    $(document).ready(function () {
        var date = new Date();
        var $years = $("select[name='years']");
        var year = date.getFullYear();
        var day = date.getDate();
        for (let i = 1900; i <= 3000; i++) {
            $years.append("<option value=" + i + ">" + i + "</option>");
        }
        $years.find("option[value=" + year + "]").prop("selected", true);
        var $months = $("select[name='months']");
        var month = date.getMonth() + 1;
        for (let i = 1; i <= 12; i++) {
            $months.append("<option value=" + i + ">" + i + "</option>")
        }
        $months.find(":nth-child(" + month + ")").prop("selected", true);
        $("input").val(setDefaultDate(year, month))
        getYearMonthDay(year, month);
        $(".days_list li:nth-child(7n)").css("color", "red")
        $(".days_list li:nth-child(7n+1)").css("color", "red")
        $(".li2").eq(day - 1).css("color", "yellow");

        $(document).on("click", "#btn1", function () {
            var monthVal = parseInt($('[name=months]').select().val())
            var yearVal = parseInt($('[name=years]').select().val())
            var month = monthVal - 1;
            if (month == 0) {
                month = 12;
                yearVal = yearVal - 1;
                $("[name=years]").val(yearVal);
            }
            $("[name=months]").val(month);
            $("input").val(setDefaultDate(yearVal, month))
            $(".days_list").empty();
            getYearMonthDay(year, month);
            $(".days_list li:nth-child(7n)").css("color", "red")
            $(".days_list li:nth-child(7n+1)").css("color", "red")

        });

        $(document).on("click", "#btn2", function () {
            var monthVal = parseInt($('[name=months]').select().val())
            var yearVal = parseInt($('[name=years]').select().val())
            var month = monthVal + 1;
            if (month == 13) {
                month=1;
                yearVal = yearVal + 1;
                $("[name=years]").val(yearVal);
            }
            $("[name=months]").val(month);
            $("input").val(setDefaultDate(yearVal, month))
            $(".days_list").empty();
            getYearMonthDay(year, month);
            $(".days_list li:nth-child(7n)").css("color", "red")
            $(".days_list li:nth-child(7n+1)").css("color", "red")
        });
        $(document).on("change", "[name=years]", function () {
            var monthVal = parseInt($('[name=months]').select().val())
            var yearVal = parseInt($('[name=years]').select().val())
            $("input").val(setDefaultDate(yearVal, monthVal))
            $(".days_list").empty();
            getYearMonthDay(yearVal, monthVal);
            $(".days_list li:nth-child(7n)").css("color", "red")
            $(".days_list li:nth-child(7n+1)").css("color", "red")
        });
        $(document).on("change", "[name=months]", function () {
            var monthVal = parseInt($('[name=months]').select().val())
            var yearVal = parseInt($('[name=years]').select().val())
            $("input").val(setDefaultDate(yearVal, monthVal))
            $(".days_list").empty();
            getYearMonthDay(yearVal, monthVal);
            $(".days_list li:nth-child(7n)").css("color", "red")
            $(".days_list li:nth-child(7n+1)").css("color", "red")
        });
        $(document).on("keyup", "input", function () {
            var dateStr = $("input").val();
            var dateZz = /^[1-2]\d{3}[-/]([1-9]|((0[1-9])|(1[0-2])))$/;
            if (dateZz.test(dateStr)) {
                if (dateStr.search("-") != -1) {
                    $("span").css("display", "none")
                    var year = dateStr.split("-")[0]
                    var month =parseInt(dateStr.split("-")[1]) 
                } 
                if (dateStr.search("/") != -1) {
                    $("span").css("display", "none")
                    var year = dateStr.split("/")[0]
                    var month =parseInt(dateStr.split("/")[1]) 
                }
                $("[name=years]").val(year);
                $("[name=months]").val(month);
                $(".days_list").empty();
                getYearMonthDay(year, month);
                $(".days_list li:nth-child(7n)").css("color", "red");
                $(".days_list li:nth-child(7n+1)").css("color", "red");
            } else {
                $("span").css("display", "block")
            }
        })
        function getYearMonthDay(year, month) {
            var date = new Date(year, month - 1, 1)
            var weekday = date.getDay();
            var days = new Date(year, month, 0).getDate();
            var str = "";
            for (let i = 0; i < weekday; i++) {
                str += `<li class="blankLi"></li>`
            }
            $(".days_list").append(str)
            for (let k = 1; k <= days; k++) {
                $(".days_list").append(`<li class="li2">${k}</li>`)
            }
        }
    })

</script>

与君归

关注

1
点赞
踩
0

收藏

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

万年历万年历.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet"
复制链接

扫一扫