【前端】html+js+css实现日历，jquery+js实现监听点击

程序员文章站 2022-06-12 20:05:38
...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <script src="../../static/js/jquery.min.js"></script>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .calendar{
        width:253px;
        height:250px;
        background:#fff;
        box-shadow:0px 1px 1px rgba(0,0,0,0.1);
        padding: 12px;
    }

    .body-list ul{
        width:100%;
        font-family:arial;
        font-weight:bold;
        font-size:14px;
    }
    .body-list ul li{
        width:26px;
        height:26px;
        margin: 5px;
        line-height:26px;
        list-style-type:none;
        display:block;
        box-sizing:border-box;
        float:left;
        text-align:center;
        cursor: pointer;
        transition: 0.3ms;
        border-radius: 50%;
    }
    .body-list ul li:hover{
        color: #6ac13c;
        border:1px solid #6ac13c;
        background:#e9f8df; /*浅绿色背景*/
    }


    .lightgrey{
        color:#a8a8a8; /*浅灰色*/
    }
    .darkgrey{
        color:#565656; /*深灰色*/
    }
    .green{
        color:#6ac13c!important; /*绿色*/
        border:1px solid #6ac13c;
        background:#e9f8df; /*浅绿色背景*/
    }
</style>
<body>
<!--  数据，包含，选中的数据，和全部的数据，选中的数据如果没有参数，则就是空对象  -->
<div class="calendar">
    <div class="title" style="font-size: 10px">
<!--        <h1 class="green" id="calendar-title">Month月</h1>-->
        <h2 class="green small" id="calendar-year-month">Year年</h2>
        <a href="" id="prev">Prev Month</a>
        <a href="" id="next">Next Month</a>
    </div>
    <div class="body">
        <div class="lightgrey body-list">
            <ul>
                <li>MON</li>
                <li>TUE</li>
                <li>WED</li>
                <li>THU</li>
                <li>FRI</li>
                <li>SAT</li>
                <li>SUN</li>
            </ul>
        </div>
        <div class="darkgrey body-list">
            <ul id="days">
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    var month_olympic = [31,29,31,30,31,30,31,31,30,31,30,31];
    var month_normal = [31,28,31,30,31,30,31,31,30,31,30,31];
    var month_name = ["1","2","3","4","5","6","7","8","9","10","11","12"];

    var holder = document.getElementById("days");
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    // var ctitle = document.getElementById("calendar-title");
    var cyear = document.getElementById("calendar-year-month");

    var my_date = new Date();
    var my_year = my_date.getFullYear();
    var my_month = my_date.getMonth();
    var my_day = my_date.getDate();

    //获取某年某月第一天是星期几
    function dayStart(month, year) {
        var tmpDate = new Date(year, month, 1);
        return (tmpDate.getDay());
    }

    //计算某年是不是闰年，通过求年份除以4的余数即可
    function daysMonth(month, year) {
        var tmp = year % 4;
        if (tmp === 0) {
            return (month_olympic[month]);
        } else {
            return (month_normal[month]);
        }
    }

    function refreshDate(){
        var str = "";
        var totalDay = daysMonth(my_month, my_year); //获取该月总天数
        var firstDay = dayStart(my_month, my_year); //获取该月第一天是星期几
        var myclass;
        for(var i=1; i<firstDay; i++){
            str += "<li></li>"; //为起始日之前的日期创建空白节点
        }
        //根据下面方法得到的数据，如果是今天之后的数据，则显示蓝色表示可以修改。
        //如果是以前完成过的数据，则显示绿色的勾勾
        for(var i=1; i<=totalDay; i++){
            if((i<my_day && my_year==my_date.getFullYear() && my_month==my_date.getMonth()) || my_year<my_date.getFullYear() || ( my_year==my_date.getFullYear() && my_month<my_date.getMonth())){
                myclass = " class='lightgrey'"; //当该日期在今天之前时，以浅灰色字体显示
            }else if (i==my_day && my_year==my_date.getFullYear() && my_month==my_date.getMonth()){
                myclass = " class='green lightgrey'"; //当天日期以绿色背景突出显示
            }else{
                myclass = " class='darkgrey'"; //当该日期在今天之后时，以深灰字体显示
            }
            str += "<li"+myclass+">"+i+"</li>"; //创建日期节点
        }
        holder.innerHTML = str; //设置日期显示
        // ctitle.innerHTML = month_name[my_month]; //设置英文月份显示
        cyear.innerHTML = my_year+"年"+month_name[my_month]+"月"; //设置年份显示



        let itemli = $("#days>li");
        console.log(itemli)
        //每个都可以点
        for(var i = 0; i<itemli.length; i++){
            itemli[i].index = i; //给每个li定义一个属性索引值
            itemli[i].onclick = function(){
                console.log(this.index+" "+this.innerHTML);
            }
        }
    }
    refreshDate(); //执行该函数




    //每次切换都得到这一个月的数据，上面，如果这个月完成过，则变为对勾，否则显示日期
    prev.onclick = function(e){
        e.preventDefault();
        my_month--;
        if(my_month<0){
            my_year--;
            my_month = 11;
        }
        //得到数据

        refreshDate();
    }
    next.onclick = function(e){
        e.preventDefault();
        my_month++;
        if(my_month>11){
            my_year++;
            my_month = 0;
        }
        //得到数据

        refreshDate();
    }


    // document.getElementsByTagName("li")

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