原生js制作日历

最新推荐文章于 2023-12-26 14:29:38 发布
最新推荐文章于 2023-12-26 14:29:38 发布
阅读量469 收藏 1
点赞数 1
文章标签： javascript 前端 servlet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58902522/article/details/127250682
版权

效果图：

 代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>Document</title>

    <style>

        #year {

            width: 6rem;

            font-size: 1rem;

            margin-bottom: 1rem;

        }

        button {

            width: 3rem;

            height: 3rem;

            margin-bottom: 0.5rem;

            background-color: white;

        }

        button:hover {

            cursor: pointer;

        }

        .text {

            display: flex;

        }

        #content {

            margin-left: 1rem;

        }

        table {

            user-select: none;

        }

        p {

            height: 1rem;

        }

    </style>

</head>

<body>

    <div class="text">

        <div class="date">

            <select name="" id="year" οnchange="changeSelect(value)"></select>

            <div>

                <button id="Jan" οnclick="change('Jan')">Jan</button>

                <button id="Feb" οnclick="change('Feb')">Feb</button>

            </div>

            <div>

                <button id="Mar" οnclick="change('Mar')">Mar</button>

                <button id="Apr" οnclick="change('Apr')">Apr</button>

            </div>

            <div>

                <button id="May" οnclick="change('May')">May</button>

                <button id="Jun" οnclick="change('Jun')">Jun</button>

            </div>

            <div>

                <button id="Jul" οnclick="change('Jul')">Jul</button>

                <button id="Aug" οnclick="change('Aug')">Aug</button>

            </div>

            <div>

                <button id="Sept" οnclick="change('Sept')">Sept</button>

                <button id="Oct" οnclick="change('Oct')">Oct</button>

            </div>

            <div>

                <button id="Nov" οnclick="change('Nov')">Nov</button>

                <button id="Dec" οnclick="change('Dec')">Dec</button>

            </div>

        </div>

        <div id="content"></div>

    </div>

</body>

<script>

    var tody = new Date();

    var year = tody.getFullYear();

    var month = tody.getMonth();

    var day = tody.getDate();

    var t = month;

    var isLeap = year % 400 == 0 ? 1 : ((year % 100 != 0 && year % 4 == 0) ? 1 : 0);

    var aMouth = [31, 28 + isLeap, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];//创建月份尾数表，作为每张日历最后一个数

    var aWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

    var oDetail = document.getElementById('content');//显示当前日期的栏目

    function oninit() {

        let arr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];

        let array = [];

        document.getElementById(arr[month]).style.backgroundColor = 'red';

        document.getElementById(arr[month]).style.color = 'white';

        // 年份选择显示当前年份前后60年

        for (let i = 60; i > -1; i--) {

            array.push(year - i);

        }

        for (let i = 1; i < 61; i++) {

            array.push(year + i);

        }

        for (let i = 0; i < array.length; i++) {

            document.getElementById('year').options.add(new Option(array[i], array[i]));

            if (array[i] === year) {

                document.getElementById('year').options.selectedIndex = i;

            }

        }

        time(tody);

    }

    oninit();

   

    // 下拉框年份变化调用

    function changeSelect(k) {

        oDetail.childNodes[0].remove();

        time(new Date(k, t, day));

    }

    function time(k) {

        var cTable = document.createElement('table'); //创建table

        var cTHead = document.createElement('thead'); //创建thead

        var cTBody = document.createElement('tbody'); //创建tbody

        year = k.getFullYear();

        month = k.getMonth();

        day = k.getDate();

        isLeap = year % 400 == 0 ? 1 : ((year % 100 != 0 && year % 4 == 0) ? 1 : 0);

        aMouth = [31, 28 + isLeap, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

        t = month;

        // 创造一个table表格头

        var cTr0 = document.createElement('tr');

        for (var k = 0; k < 7; k++) {

            var cTd0 = document.createElement('td');

            cTd0.innerHTML = aWeek[k];

            cTd0.style.borderBottom = '1px solid #bbb';

            cTd0.style.paddingBottom = '0.5rem';

            cTr0.appendChild(cTd0);

        }

        cTHead.appendChild(cTr0);

        cTable.appendChild(cTHead);

        var firstDate = new Date(year, month, 1); //获取当月第一天

        var dayOfWeek = firstDate.getDay();//获取当月的第一天是星期几

        for (var i = 0; i < 6; i++) {

            var ctr = document.createElement('tr');

            for (var j = 0; j < 7; j++) {

                var re = i * 7 + j;

                var re1 = re - dayOfWeek + 1;

                var ctd = document.createElement('td');

                if (re1 <= 0) {

                    if (dayOfWeek > 0) {

                        // 获取上个月最后一天

                        let sf = new Date(document.getElementById('year').value, t, 0).getDate();

                        let ti = aWeek[new Date(document.getElementById('year').value, t - 1, sf + re1).getDay()];

                        ctd.style.border = '1px solid #bbb';

                        ctd.style.width = '8rem';

                        ctd.style.opacity = 0.2;

                        if (ti === 'Sun' || ti === 'Sat') {

                            ctd.style.backgroundColor = '#1E90FF';

                            ctd.innerHTML = '<div>' + '<p style="font-size: 0.875rem;">' + (sf + re1) + '</p>' + '<p style="font-size: 0.4rem;">' + dateTimes(new Date(document.getElementById('year').value, t - 1, sf + re1)) + '</p>' + '<p style="color:red; text-align: right; font-size: 0.4rem;">休息日</p></div>';

                        } else {

                            ctd.innerHTML = '<div>' + '<p style="font-size: 0.875rem;">' + (sf + re1) + '</p>' + '<p style="font-size: 0.4rem;">' + dateTimes(new Date(document.getElementById('year').value, t - 1, sf + re1)) + '</p>' + '<p style="color:black; text-align: right; font-size: 0.4rem;">工作日</p></div>';

                        }

                    }

                } else if (re1 > aMouth[month]) {

                    let sf = new Date(document.getElementById('year').value, t + 1, 0).getDate();

                    let ti = aWeek[new Date(document.getElementById('year').value, t + 1, re1 - sf).getDay()];

                    ctd.style.border = '1px solid #bbb';

                    ctd.style.width = '8rem';

                    ctd.style.opacity = 0.2;

                    if (ti === 'Sun' || ti === 'Sat') {

                        ctd.style.backgroundColor = '#1E90FF';

                        ctd.innerHTML = '<div>' + '<p style="font-size: 0.875rem;">' + (re1 - sf) + '</p>' + '<p style="font-size: 0.4rem;">' + dateTimes(new Date(document.getElementById('year').value, t + 1, re1 - sf)) + '</p>' + '<p style="color:red; text-align: right; font-size: 0.4rem;">休息日</p></div>';

                    } else {

                        ctd.innerHTML = '<div>' + '<p style="font-size: 0.875rem;">' + (re1 - sf) + '</p>' + '<p style="font-size: 0.4rem;">' + dateTimes(new Date(document.getElementById('year').value, t + 1, re1 - sf)) + '</p>' + '<p style="color:black; text-align: right; font-size: 0.4rem;">工作日</p></div>';

                    }

                } else {

                    let ti = aWeek[new Date(document.getElementById('year').value, t, re1).getDay()];

                    ctd.style.border = '1px solid #bbb';

                    ctd.style.width = '8rem';

                    if (re1 == day && month == tody.getMonth() && year == tody.getFullYear()) {

                        ctd.style.color = 'red';

                    }

                    if (ti === 'Sun' || ti === 'Sat') {

                        ctd.style.backgroundColor = '#1E90FF';

                        ctd.innerHTML = '<div>' + '<p style="font-size: 0.875rem;">' + re1 + '</p>' + '<p style="font-size: 0.4rem;">' + dateTimes(new Date(document.getElementById('year').value, t, re1)) + '</p>' + '<p style="color:red; text-align: right; font-size: 0.4rem;">休息日</p></div>';

                    } else {

                        ctd.innerHTML = '<div>' + '<p style="font-size: 0.875rem;">' + re1 + '</p>' + '<p style="font-size: 0.4rem;">' + dateTimes(new Date(document.getElementById('year').value, t, re1)) + '</p>' + '<p style="color:black; text-align: right; font-size: 0.4rem;">工作日</p></div>';

                    }

                }

                ctr.appendChild(ctd); //将创造出来的td插入到tr中

            }

            cTBody.appendChild(ctr); //将创造出来的tr插入到tbody中

        }

        cTable.appendChild(cTBody); //将创造出来的tbody插入到table中

        oDetail.appendChild(cTable);

    }

    // 点击月份背景和字体颜色变化

    function change(k) {

        let arr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];

        for (let i = 0; i < arr.length; i++) {

            if (k === arr[i]) {

                document.getElementById(arr[i]).style.backgroundColor = 'red';

                document.getElementById(arr[i]).style.color = 'white';

                oDetail.childNodes[0].remove();

                time(new Date(document.getElementById('year').value, i, day));

                t = i;

            } else {

                document.getElementById(arr[i]).style.backgroundColor = 'white';

                document.getElementById(arr[i]).style.color = 'black';

            }

        }

    }

    // 获取农历

    function dateTimes(time) {

        let date = time;

        dateString = date.toLocaleString('zh-CN-u-ca-chinese');

        dateString = dateString.replace(/(\d+)\s*?年/, (x, y) => {

            let result = '';

            result = "甲乙丙丁戊己庚辛壬癸".charAt((y - 4) % 10); // 天干

            result += "子丑寅卯辰巳午未申酉戌亥".charAt((y - 4) % 12); // 地支

            return result;

        });

        dateString = dateString.split(' ')[0]; // 取年月日

        let g = dateString.substr(0, 2);

        let m = dateString.substring(2, dateString.match('月').index) + '月';

        let d = dateString.match(/\d+/)[0];

        if (d < 11) {

            d = '0' + d;

        }

        // d = d < 11 ? '初' + tool.numberToString(d) : tool.numberToString(d);

        let animals = ["猴", "鸡", "狗", "猪", "鼠", "牛", "虎", "兔", "龙", "蛇", "马", "羊"];

        let index = date.toLocaleString('zh-CN-u-ca-chinese').substr(0, 4) % 12;

        let a = animals[index] + '年';

        let arr = ['初', '十', '廿', '三十'];

        let str = ['一', '二', '三', '四', '五', '六', '七', '八', '九'];

        if (parseInt(d.split('')[1]) != 0) {

            d = arr[parseInt(d.split('')[0])] + str[parseInt(d.split('')[1] - 1)];

        } else {

            d = arr[parseInt(d.split('')[0])];

        }

        return g + a + m + d;

    }

    // 参考：百度查询农历日期推导原理，以及部分原生js的api。

</script>

</html>

weixin_58902522
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【实验小案例】原生JavaScript实现日历表
迷恋的博客
09-27 1495
原生JavaScript实现简易日历表的参考
带农历的js日期显示（包含农历闰月）
05-22
调用CalConv（）即可，显示了农历时间包括天干、地支、属相和时辰（子时等）。也可以判断农历的闰月。如2012年的5月22日就是闰四月初二。
原生 JS 手写日历组件
qq_53109172的博客
09-10 422
并不是忘记了解析后面的代码，后面的代码只是简单的获取dom，根据条件生成元素，通过方法来修改年月值，再次调用 getCalendar方法生成新的 dom 在渲染即可，所以就不用解析了。
原生js日历
xm2by的博客
08-23 2052
js原生日历 参考文献： [1] js实现日历的简单算法 [2] 创建一个js日历（原生JS实现日历）
用原生javascript制作日历
rhrh_fd的博客
04-15 1855
用原生js制作日历 1，先在html内容写好日历的样式框架 <div class="container"> <header> <div class="left">上个月</div> <div class="center"></div> ...
从零开始, 用原生js写一个类似elementUI的日历
u012732909的博客
12-10 570
最近工作中经常用到日历这个组件, 以前大多是用moment.js或者dayjs去做的, 其实使用原生js也并不复杂. 1.首先我们来认识几个这个组件中使用的new Date常用的方法 this.lastDay = new Date(y, m + 1, 0).getDate() // 获取指定月的最后一天也即每月多少天 this.lastMonthDay = new Date(y, m, 0).getDate() // 获取上个月多少天 this.firs...
原生js制作日历控件实例分享
11-27
本文实例为大家分享了js实现一个简单的日历控件，供大家参考，具体内容如下 效果图： 具体代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>date</title>...
原生js实现卡片式日历撕掉翻转特效.zip
01-21
本示例中的"原生js实现卡片式日历撕掉翻转特效.zip"是一个利用JavaScript（特别是原生JavaScript，非依赖任何库如jQuery）创建的创新日历功能，它通过模拟日历卡片的撕掉和翻转效果，为用户提供了独特的视觉体验。...
原生JS代码制作带记事备忘功能的双月份显示效果的日历
最新发布
06-06
在本项目中，我们将探讨如何使用原生JavaScript（不依赖任何外部库）创建一个具有记事备忘功能的双月视图日历。这个日历不仅能够显示当前和接下来的月份，还允许用户添加、编辑和删除备忘录，提供了一个实用的交互式...
轻量级的原生js日历插件calendar.js使用指南.docx
01-22
**轻量级原生JS日历插件calendar.js使用指南** `calendar.js`是一个轻量级的JavaScript日历插件，旨在提供一个简单且高效的方式来在网页上展示和选择日期。这个插件允许用户通过点击特定的文字或按钮，弹出一个日历...
原生JavaScript实现自定义日历
qq_41812656的博客
09-22 988
以下内容只返回js数据结构，css样式可以用grid布局自行开发，后续会把农历相关的数据也给补充上，如有错误，欢迎补充~~
使用原生js和jquery实现一个可编辑的日历
m0_72663698的博客
12-26 233
编辑日历是在index.js的get_date函数中进行操作的，正常项目里是在get_date（）这个函数中先请求到要渲染的日期，然后把日期放到一个数组里调用一下日历组件封装好的方法calendar.setData(['2023-12-25'], 'wdl')除此之外，因为js中使用了jquery的语法，可自行引一个jquery的压缩包，然后一个可编辑的日历就完成了。其中setData参数1是处理好的要渲染的日期数组，参数2是自己在css里面写好的想要渲染的样式。
javascript农历
企业ERP数智化知识管理
05-21 1294
原生JS实现简单的日历功能
qq_44980680的博客
08-28 2077
原生js实现日历,简单粗暴
js 日历控件
weixin_48495574的博客
02-28 1070
仿日历的js代码
日历封装 js原生
qq_41429765的博客
11-24 445
【代码】日历封装 js原生。
原生js日历制作——初始日期对象
橙子小姐的博客
03-01 435
Date对象 Date对象用来处理日期和时间 创建日期对象 var date = new Date();//使用构造函数创建一个当前时间的对象 var date = new Date("2017-03-22");//创建一个指定时间的日期对象 var date = new Date("2017-03-22 00:52:34");//创建一个指定时间的日期对象 var date = new Date...
【JavaScript】制作日历
m0_49442965的博客
10-13 1797
【代码】【JavaScript】制作日历。
js原生日历
liudanyang_21的博客
06-17 240
突然发现日期对象可以进行 加减 ， 利用这个特性写了一个可以说是对只要会JavaScript 的就可以写的日历；没有各种算法，只有一些逻辑相信只要懂javascript就差不多看俩眼就会的日历。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值