手写日历vue（简化版）

最新推荐文章于 2023-12-10 00:43:28 发布

时遇¥.¥..

最新推荐文章于 2023-12-10 00:43:28 发布

阅读量540

点赞数 1

分类专栏：笔记文章标签： vue js

本文链接：https://blog.csdn.net/weixin_46544600/article/details/117394859

版权

笔记专栏收录该内容

51 篇文章 2 订阅

订阅专栏

效果：一个很简单日历

<!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 href="./static/css/index.css" rel="stylesheet" type="text/css">
    <style>
        .calendar {
            width: 280px;
            margin: 20px auto;
            background: #e8e8e8;
        }
        .title{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 15px;
        }

        .weeks li {
            display: inline-block;
            width: 14.2%;
            text-align: center;
            background: gray;
        }

        .days li{
            display: inline-block;
            width: 14.2%;
            text-align: center;
            padding: 5px 0;
        }
    </style>
</head>

<body>
    <div id="app" class="main-container">
        <div class="calendar">
            <div class="title">
                <button @click="Monthchange(1)">--</button>
               <span>{{mymonths}}</span> 
               <button @click="Monthchange(2)">++</button>
            </div>
            <ul class="weeks">
                <li v-for="(item,index) in weeks" :key="index">{{item}}</li>
            </ul>
            <ul class="days">
                <li v-for="(subitem,i) in mydays" :key="i" :style="i == 0?`margin-left: ${14.2 * myWeek}%`:''">
                   {{subitem}}
                </li>
            </ul>

        </div>
    </div>
    <script src="./static/js/vue.js"></script>
    <script type="text/javascript">
        /*
        手写日历 笔记：

            1.获取月份对应的天数 
            2.获取月份 1号星期几 且 计算预留距离，
            3.增加和减少月份操作
        */
        new Vue({
            el: "#app",
            data: {
                weeks: ['日','一', '二', '三', '四', '五', '六' ], // 星期排序
                mymonths: "2021-05", // 当前所在月份
                mydays: [], // 每月天数 通过当前月份算得
                myWeek:'',
            },
            created() {
                this.getDayAndWeek(); 
            },
            methods: {
                // 获取当前月份对应的天数 和 一号对于星期几
                getDayAndWeek(){
                    let mytime = new Date(this.mymonths);
                    // console.log(mytime.getFullYear(),mytime.getMonth()+1,);
                    // 根据当前月份 获取当前月份的天数 是30 还是31
                    this.mydays = new Date(mytime.getFullYear(),mytime.getMonth()+1,0).getDate(); 
                    // 根据当前月份 获取当前月份一号星期几
                    this.myWeek = new Date(mytime + "-1").getDay()
                    // console.log(this.mydays,this.myWeek)
                },
                // 月份切换 val==1 -- val==2 ++
                Monthchange(val){
                    let mytime = new Date(this.mymonths);
                    // -- 月份
                    if(val==1){
                        if(mytime.getMonth()){  //  != 0  前一月
                            this.mymonths = `${mytime.getFullYear()}-${mytime.getMonth()}`;
                        }else{ // 月份 == 0后切换到上前一年的12月
                            this.mymonths = `${mytime.getFullYear() - 1}-12`
                        }
                    }else{ // ++ 月份
                        if(mytime.getMonth() == 11){  // 月份满 11 后年份加 一 月份变成 1 月
                            this.mymonths = `${mytime.getFullYear() + 1}-1`;
                        }else{ // 月份 正常 ++
                            this.mymonths = `${mytime.getFullYear()}-${mytime.getMonth() + 2}`
                        }
                    }
                    console.log(this.mymonths)
                    this.getDayAndWeek(); // 刷新日历
                },
                
            }

        })
    </script>
    <!-- <script src="./static/js/0328.js"></script> -->
</body>
</html>

时遇¥.¥..

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
手写日历vue（简化版）

效果：一个很简单日历<!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 href="./static/css/i
复制链接

扫一扫