DDR爱好者之家 Design By 杰米
这周写自己的项目发现又用到日历了,加之自己毕业之后的第一个工作中遇到的任务也是需要写个日历(组员写了,我就不用写了)
今天就来好好折腾一下日历是怎么写的。
首先,我们看看 windows 的日历。发现总共有这么几个元素。先实现试试。
1.年份的选择、月份的选择
2.周一 ~ 周日(周日 ~ 周六)
3.日历格子 6*7 = 42
从数据的角度来分析日历的实现是比较简单的
1.我们需要显示一个当前时间的结构 - new Date()
2.我们需要显示当月的信息 - [星期(周一~周日),日期(1-[28,29,30,31])]
其中我们只要知道了每个月的 1日 是星期几,就能很容易地摆放后面的日子(万事开头难)。
- 我们最多需要 6 行来显示我们的日期,因为要第一排如果只包含本月的一天 6(上个月的) + (1 + 4*7),这样就五行了,当月天数若大于 29,就显示不下了
- 确定了 6 行之后,我们发现我们可能需要获取上个月,和下个月多出来的几天的摆放位置。
- 不同年份的不同月的 2月份,我们知道它的日期是不同的,所以我们还需要判断 平年还是闰年。
3.显示上个月,下个月的切换。我们发现需要有个函数来帮我们更新日历。
分析完之后,让我们跟着 新增/修改 一些代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .week-item { display: inline-block; width: 80px; height: 40px; line-height: 40px; border: 1px solid sandybrown; text-align: center; } .date-item { display: inline-block; width: 80px; height: 40px; line-height: 40px; border: 1px solid beige; text-align: center; } </style> </head> <body> <div class="wrapper"> <div class="year-line"> <button id="preMonth" class="year-prev">上一月</button> <button id="nowYear" class="year-now"></button> <button id="nowMonth"></button> <button id="nowDate"></button> <button id="nextMonth" class="year-next">下一月</button> </div> <div id="weekLine" class="week-line"></div> <div id="dateWrap" class="date-wrap"></div> </div> </body> <script> // 工具方法 - start // 1.为了获得每个月的日期有多少,我们需要判断 平年闰年[四年一闰,百年不闰,四百年再闰] const isLeapYear = (year) => { return (year % 400 === 0) || (year % 100 !== 0 && year % 4 === 0); }; // 2.获得每个月的日期有多少,注意 month - [0-11] const getMonthCount = (year, month) => { let arr = [ 31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ]; let count = arr[month] || (isLeapYear(year) "date-line">'; for (let j = 0; j < 7; j++) { str += `<span class='date-item'>${res.shift()}</span>`; if (j === 6) { str += '</div>'; } } } document.getElementById('dateWrap').innerHTML = str; } }; updateCalendar(); // 添加上一月,下一月事件 let oPreButton = document.getElementById('preMonth'); let oNextButton = document.getElementById('nextMonth'); oPreButton.addEventListener('click', function () { let currentYear = +document.getElementById('nowYear').textContent; let currentMonth = +document.getElementById('nowMonth').textContent - 1; let currentDate = +document.getElementById('nowDate').textContent; if (currentMonth === 0) { updateCalendar(currentYear - 1, 11, currentDate); } else { updateCalendar(currentYear, currentMonth - 1, currentDate); } }); oNextButton.addEventListener('click', function () { let currentYear = +document.getElementById('nowYear').textContent; let currentMonth = +document.getElementById('nowMonth').textContent - 1; let currentDate = +document.getElementById('nowDate').textContent; if (currentMonth === 11) { updateCalendar(currentYear + 1, 0, currentDate); } else { updateCalendar(currentYear, currentMonth + 1, currentDate); } }); </script> </html>
发现用 dom 直接操作而不是通过 mvvm 框架实现确实还是比较蛋疼的,以下是这次实现的效果。
实现一个功能的时候,从数据的层面分析,有时候会比较容易理解
以上就是js实现日历的详细内容,更多关于js 日历的资料请关注其它相关文章!
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年12月24日
2024年12月24日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]