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. [IOS][已越狱]配合网易云音乐，使用Bridge快速免iTunes导入音乐到“音乐”

    前置:已越狱IOS设备   工具表: Bridge{bigboss源,可以使用cydown以非官方服务器下载安装} 网易云音乐{Appstore} Filza{很多源都有}     网易云试听缓存路径 ...

  2. windows7 64下redis安装

    1.redis官方下载地址:https://redis.io/download redis 64位下载地址:https://github.com/ServiceStack/redis-windows, ...

  3. c# 枚举安卓系统中所有目录及文件名

    using Android.App; using Android.Widget; using Android.OS; using System.Runtime.InteropServices; nam ...

  4. 创建一个dynamics 365 CRM online plugin (四) - PreValidation

    开始之前,我们要确认一下 Plugin 的 pipeline. PreValidation -> PreOperation -> Server Side System Main Event ...

  5. pagination.js 使用

    pagination.js 使用方式 $('.paginationjs').pagination({ dataSource: 'DetailImage?handler=Search', locator ...

  6. My Demos

    Some elementary algorithms on discrete differential geometry http://www.cnblogs.com/yaoyansi/p/56350 ...

  7. (转)配置、安装Apache24免装版

    去过官网下载的应该都知道现在apache已经不提供.exe的一键安装程序的形式了,下载到的都只有免安装版本的. 首先下载,不在叙述.下载解压之后会得到如下的目录:. 1.进入:apache24le-- ...

  8. Python 目录整理

    基础部分: 1  常量  2 字符编码  字符编码补充 3 编码集 4 break与continue 5装饰器 6 迭代器 7生成器 8面向过程 9模块 10包 11 递归调用 12文件的用途 13类 ...

  9. 微软 workflow 工作流总结

    1.状态机工作流 (1)状态机工作流从state1 流转到 state2 到stateN (2) state中有执行状态和退出状态 (3) 在进入下一个步骤(state1 到 state2)前,首先会 ...

  10. Centos7之系统优化

    优化条目: 修改ip地址.网关.主机名.DNS等 关闭selinux,清空iptables 添加普通用户并进行sudo授权管理 更新yum源及必要软件安装 定时自动更新服务器时间 精简开机自启动服务 ...