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. [小程序]_ELVE_小程序开发（1）

    最近在自学小程序,但是网上大部分重点都放在了界面的设计上,涉及到后端的很少,博主索性写点博客总结一下. #0X01  node.js环境搭建 不同于其他教程,本系列先重点介绍服务器端,后续再介绍客户端 ...

  2. 公司内网接口ip城市查询分析

    require 'rubygems' require 'json' print ARGV print "fist is :",ARGV[0] logfile="#{ARG ...

  3. http options 请求

  4. Java高级特性 第10节 IDEA和Eclipse整合JUnit测试框架

    一.IDEA整合Junit测试框架 1.安装插件 打开File菜单的下拉菜单settings[设置] : 点击左侧Plugins[插件]菜单 在输入框中输入JUnitGenerator 2.0,点击I ...

  5. 【申嵌视频】基于VMWare虚拟机下安装ubuntu操作系统的详细步骤

    [申嵌视频]基于VMWare虚拟机下安装ubuntu操作系统 适合搭建mini2440, Tiny6410, smart210,Tiny4412, NanoPC-T2, NanoPC-T3, Nano ...

  6. 分类问题的几个评价指标（Precision、Recall、F1-Score、Micro-F1、Macro-F1

    轉自 https://blog.csdn.net/sinat_28576553/article/details/80258619 四个基本概念TP.True Positive   真阳性:预测为正,实 ...

  7. RAM和Flash区别

    都是随机存储器,断电数据消失,但Flash有点不一样,它在消失数据之前,添加了一个""性质",这个性质能上电后再识别,且把这个信号返回到ram中,这样近似的把flash当 ...

  8. C#使用NPOI读写Excel的注意事项

    NPOI的基本使用参照:https://www.cnblogs.com/lixiaobin/p/NPOI.html 既存文档读取修改方法 *既存Excel文档修改保存注意使用FileMode.Crea ...

  9. 用PLSQL DEVELOPER工具简单查找ORACLE中的死锁和死锁排除

    用DBA身份登录后 查找死锁: select sess.sid,     sess.serial#,     lo.oracle_username,     lo.os_user_name,     ...

  10. @Async异步注解与SpringBoot结合使用

    当你在service层需要启动异步线程去执行某些分支任务,又不希望显式使用Thread等线程相关类,只想专注于实现业务逻辑代码开发,可以使用@Async异步注解. 1. 使用@Async 异步注解 C ...