JS写一个日历，配合jQuery操作DOM

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Calendar</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            list-style: none;

        }

        header {

            text-align: center;

            line-height: 40px;

        }

        main {

            margin-top: 100px;

        }

        main div {

            margin: 20px;

            text-align: center;

        }

        .full-date {

            margin: 0 20px;

            vertical-align: middle;

        }

        .left,

        .right {

            border: 1px solid #add8e6;

            padding: 5px 10px;

        }

        ul {

            margin: 0 40px 10px;

        }

        ul li {

            display: inline-block;

            width: 40px;

            text-align: center;

            line-height: 40px;

        }

        .title li {

            width: 35px;

        }

    </style>

</head>

<body>

    <header>

        简单日历

    </header>

    <main>

        <div>

            <span class="left"><</span>

            <span class="full-date">2019/1/1</span>

            <span class="right">></span>

        </div>

        <ul class="title">

            <li>日</li>

            <li>一</li>

            <li>二</li>

            <li>三</li>

            <li>四</li>

            <li>五</li>

            <li>六</li>

        </ul>

        <section id="date"></section>

    </main>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.js"></script>

    <script>

        const Calendar = { // 实现日历方法

            date: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],

            now: new Date(),

            result: [],

            need: false,

            init(needOther) {

                this.result = [];

                this.need = needOther;

                let data = [],

                    temp = [];

                if (this.leapYear(this.now)) { // 根据是否是闰年修改日期数组

                    this.date[1] = 29;

                } else {

                    this.date[1] = 28;

                }

                for (let i = 1; i <= this.date[this.now.getMonth()]; i++) { // 添加本月日期

                    data.push(i);

                }

                if (this.need) { // 是否需要其他日期

                    for (let i = 1; i <= this.getFirstWeek(this.now); i++) { // 添加上月日期

                        let num = 0;

                        if (this.now.getMonth() === 0) {

                            num = this.date[11];

                        } else {

                            num = this.date[this.now.getMonth() - 1];

                        }

                        data.unshift(num - i + 1);

                    }

                    for (let i = 1;; i++) { // 添加下月日期

                        if (data.length % 7 === 0) {

                            break;

                        } else {

                            data.push(i);

                        }

                    }

                } else {

                    for (let i = 1; i <= this.getFirstWeek(this.now); i++) { // 添加上月空白日期

                        data.unshift('');

                    }

                }

                for (let i = 1; i <= data.length; i++) { // 转换为二维数组

                    temp.push(data[i - 1]);

                    if (i % 7 === 0) {

                        this.result.push(temp);

                        temp = [];

                    }

                }

                this.result.push(temp);

            },

            getFirstWeek(time) { // 获取每月1号是星期几

                const date = new Date(time.getFullYear(), time.getMonth());

                return date.getDay();

            },

            leapYear(time) { // 判断闰年

                const year = new Date(time).getFullYear();

                return year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0);

            },

            preMonth() { // 下个月

                if (this.now.getMonth() === 0) {

                    this.now = new Date(this.now.getFullYear() - 1, 11, this.now.getDate());

                } else {

                    this.now = new Date(this.now.getFullYear(), (this.now.getMonth()) - 1, this.now.getDate());

                }

                this.init(this.need);

            },

            nextMonth() { // 上个月

                if (this.now.getMonth() === 11) {

                    this.now = new Date(this.now.getFullYear() + 1, 0, this.now.getDate());

                } else {

                    this.now = new Date(this.now.getFullYear(), this.now.getMonth() + 1, this.now.getDate());

                }

                this.init(this.need);

            }

        }

        $(function () {

            Calendar.init();

            const render = () => {

                const nowDate = Calendar.now;

                $('.full-date').text(

                    `${nowDate.getFullYear()}/${nowDate.getMonth() + 1}/${nowDate.getDate()}`);

                Calendar.result.forEach(item => {

                    let html = '<ul>';

                    item.forEach(data => {

                        html += `<li>${data}</li>`;

                    });

                    html += '</ul>';

                    $('#date').append(html);

                });

            };

            render();

            $('.left').click(() => {

                $('#date').empty();

                Calendar.preMonth();

                render();

            });

            $('.right').click(() => {

                $('#date').empty();

                Calendar.nextMonth();

                render();

            });

        });

    </script>

</body>

</html>

JS写一个简单日历的更多相关文章

  1. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  2. js写一个简单的日历

    思路:先写一个结构和样式,然后写本月的时间,之后计算上下月份的关系 <!DOCTYPE html> <html lang="en"> <head> ...

  3. [NodeJS]使用Node.js写一个简单的在线聊天室

    声明:教程来自<Node即学即用>.源代码案例均出自此书.博文仅为个人学习笔记. 第一步:创建一个聊天server. 首先,我们先来写一个Server: var net = require ...

  4. 用node.js写一个简单爬虫，并将数据导出为 excel 文件

    引子 最近折腾node,最开始像无头苍蝇一样到处找资料,然而多数没什么卵用,都在瞎比比.在一阵瞎搞后,我来分享一下初步学习node的三个过程: 1 撸一遍NODE入门,对其有个基本的了解: 2 撸一遍 ...

  5. 用JS写一个简单的程序,算出１００中７的倍数的最大值

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 用JS 写一个简单的程序，切换七彩盒子背景

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. JS写一个简单的程序，输入两个整数，打印这两个数的和，差，积，余数

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. JS写一个简单的程序，判断年份是平年还是闰年

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. js写一个简单的九九乘法表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Android Studio学习之 日志工具

    Log.v()   低级日志 Log.d(' ',' ')  debug调试信息 第一个参数tag,当前类名 第二个参数msg,打印具体内容 Log.i()  info数据 Log.w() warn警 ...

  2. scipy 的K-means

    #导入相应的包 import scipy import scipy.cluster.hierarchy as sch from scipy.cluster.vq import vq,kmeans,wh ...

  3. sqlmap的安装

    来自:http://www.51testing.com/html/89/n-3711589.html 一.下载 首先,需下载SqlMap以及适用于Windows系统的Python.下载地址如下: 1. ...

  4. layui基本使用

    https://www.layui.com/doc/ 在线实例https://www.layui.com/demo/ 使用 自己实际操作 <script> layui.use(['laye ...

  5. redis 设置分布式锁要避免死锁

    1. jedis 中 setnx key value 虽然可以处理同步问题 (setnx 有返回值 1是key不存在把它设置进去,0是key已经存在了)但是 setnx设置完后 程序的下一步 有可能挂 ...

  6. C语言之二维数组与指针

    二维数组: ][]; 二维数组实质上也就是一维数组,a[2][3]可看做一个2个元素的一维数组,这2个元素又是另一个数组,在内存中,它的排布如下: #include "stdio.h&quo ...

  7. Ignite(二): 架构及工具

    1.集群和部署 Ignite集群基于无共享架构,所有的集群节点都是平等的,独立的,整个集群不存在单点故障. 通过灵活的Discovery SPI组件,Ignite节点可以自动地发现对方,因此只要需要, ...

  8. Windows Server 2008 R2 /2012 修改密码策略

    今天建了域环境,在添加新用户的时候,发现用简单的密码时域安全策略提示密码复杂度不够,于是我就想在域安全策略里面把密码复杂度降低一点. 问题:    在“管理工具 >> 本地安全策略 > ...

  9. Excel文件上传,高亮错误的行和列

    /// <summary> /// Excel模板写入错误信息 /// </summary> /// <param name="fileName"&g ...

  10. Ansible运维自动化

    Ansible运维自动化 一.Ansible-playbook的初步使用 playbook的使用,playbook可以把ansible的模块进行组合 ln -s /usr/local/python/b ...