HTML+CSS+JavaScript实现简单的日历效果

初学前端花了一下午写了一个简单的日历效果：

可以选择按月或者按年切换，当前日期会有绿色的背景显示，所有的日期都会正确的对应星期几。

所有代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>简单日历效果</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}ul {display: flex;flex-direction: row;}li {display: block;list-style: none;}body {background-color: rgb(236, 195, 202);}.cal-container .year-month>div:first-child>span,.cal-container .year-month .pre,.cal-container .year-month .next,.cal-container .weeks>ul>li,.cal-container .days>ul .style-default {cursor: pointer;}.cal-container .year-month .pre:hover,.cal-container .year-month .next:hover,.cal-container .weeks>ul>li:hover {text-shadow: 2px 2px 2px rgb(121, 121, 121);}.cal-container {display: flex;flex-direction: column;position: absolute;top: 20%;left: 50%;width: 600px;margin-left: -300px;box-shadow: 7px 7px 7px rgb(112, 112, 112);background-color: aquamarine;}.cal-container .year-month {position: relative;width: 100%;height: 250px;background-color: rgb(107, 215, 168);}.cal-container .year-month>div:first-child {display: flex;flex-direction: column;position: absolute;top: 50%;left: 50%;width: 200px;height: 70px;transform: translate(-50%, -50%);text-align: center;letter-spacing: 3px;}.cal-container .year-month>div:first-child>span {display: block;margin-bottom: 5px;font-weight: 700;color: white; }.cal-container .year-month>div:first-child>span:first-child {font-size: 40px;}.cal-container .year-month>div:first-child>span:last-child {font-size: 25px;}.cal-container .year-month .pre,.cal-container .year-month .next {position: absolute;top: 50%;height: 40px;transform: translateY(-20px);margin: 0 20px;font-size: 40px;color: white;}.cal-container .year-month .next {right: 0;}.cal-container .weeks>ul,.cal-container .days>ul {display: flex;flex-direction: row;flex-wrap: wrap;width: 100%;padding: 0 2.5px;background-color: rgb(202, 202, 202);}.cal-container .days>ul {padding: 20px 0;background-color: rgb(225, 225, 225);}.cal-container .weeks>ul>li {width: 85px;font-size: 20px;font-weight: 700;color: rgb(75, 75, 75);text-align: center;line-height: 50px;}.style-default {width: 50px;height: 50px;margin: 0 17.5px;font-size: 20px;font-weight: 700;color: rgb(75, 75, 75);text-align: center;line-height: 50px;}.days>ul .style-default:hover {background-color: rgb(202, 202, 202);}.cal-container .days>ul .bg-style {background-color: rgb(107, 215, 168);}.no-style {width: 50px;height: 50px;margin: 0 17.5px;}</style>
</head>
<body><div class="cal-container"><div class="year-month"><div><span id="month"></span><span id="year"></span></div><div class="pre" id="pre-month">&lt;</div><div class="next" id="next-month">&gt;</div></div><div class="weeks"><ul><li>Mon</li><li>Tue</li><li>Wed</li><li>Thu</li><li>Fri</li><li>Sat</li><li>Sun</li></ul></div><div class="days"><ul id="day"></ul></div></div><script>// 获取年月日和星期几let date = new Date();Y = date.getFullYear();M = date.getMonth();W = date.getDay();D = date.getDate();isSelect = true;    //true为选择了月，false为选择了年（添加文本阴影）// 更新当前年let yearNow = document.getElementById("year");yearNow.innerHTML = Y;// 更新当前月let monthNow = document.getElementById("month");monthNow.innerHTML = monthAndMaxDay(Y, M)[0];// 判断选中年还是月（添加文本阴影）selected(isSelect);//更新当前日let days = document.getElementById("day");updateAllDays(Y, M);// 选择按月切换还是按年切换yearNow.addEventListener("click", function() { isSelect = falseselected(isSelect); });monthNow.addEventListener("click", function() { isSelect = true;selected(isSelect); });// 左右切换日期let previous = document.getElementById("pre-month");previous.addEventListener("click", function() { changePage(true); });let next = document.getElementById("next-month");next.addEventListener("click", function() { changePage(false); });// 按日查询对应的星期几function dayToStar(year, month, day) {let theDate = new Date(year, month, day);return theDate.getDay();}// 查询一个月对应的英文命名和最大天数function monthAndMaxDay(year, month) {let month_now = "";let maxDay = 0;     // 一个月的最大天数switch(month+1) {case 1: month_now = "一月"; maxDay = 31; break;case 2: month_now = "二月";if(year % 4 == 0) {maxDay = 29;} else {maxDay = 28;}break;case 3: month_now = "三月"; maxDay = 31; break;case 4: month_now = "四月"; maxDay = 30; break;case 5: month_now = "五月"; maxDay = 31; break;case 6: month_now = "六月"; maxDay = 30; break;case 7: month_now = "七月"; maxDay = 31; break;case 8: month_now = "八月"; maxDay = 31; break;case 9: month_now = "九月"; maxDay = 30; break;case 10: month_now = "十月"; maxDay = 31; break;case 11: month_now = "十一月"; maxDay = 30; break;case 12: month_now = "十二月"; maxDay = 31; break;default: month = "";}return [month_now, maxDay];}// 更新当前月的所有天数function updateAllDays(year, month) {let offset = dayToStar(year, month, 1);let maxDay = monthAndMaxDay(year, month)[1];// 实现日期和星期对应for(let i=0; i<offset; i++) {let day = document.createElement("li");day.className = "no-style";days.appendChild(day);}for(let i=1; i<=maxDay; i++) {let day = document.createElement("li");let dateNow = new Date();// 当前日期有绿色背景if(year == dateNow.getFullYear() && month == dateNow.getMonth() && i == dateNow.getDate()) {day.className = "style-default bg-style"} else {day.className = "style-default";}day.id = i;day.innerText = idays.appendChild(day);}}// 选择按月切换还是按年切换function selected(boolean) {if(boolean) {monthNow.style.textShadow = "2px 2px 2px rgb(121, 121, 121)";yearNow.style.textShadow = "none";} else {monthNow.style.textShadow = "none";yearNow.style.textShadow = "2px 2px 2px rgb(121, 121, 121)";}}// 点击切换事件function changePage(boolean) {// 按年切换还是按月切换if(isSelect) {// 向前切换还是向后切换if(boolean) {M = M-1;if(M == -1) {Y--;M = 11;}} else {M = M+1;if(M == 11) {Y++;M = 0;}}} else {if(boolean) {Y--;} else {Y++;}}yearNow.innerHTML = Y;monthNow.innerHTML = monthAndMaxDay(Y, M)[0];// 清空一个月所有天数days.innerHTML = "";// 重新添加一个月所有天数updateAllDays(Y, M);}</script>
</body>
</html>

HTML+CSS+JavaScript实现简单的日历效果相关推荐

html日历页面节假日_js css+html实现简单的日历
web页面中很多地方都会用到日历显示,选择等,本文用html.css.javascript实现简单的日历.完成以后的效果与页面左侧的效果差不多,可以切换上个月.下个月.也可以根据实际情况进行扩展. h ...
html日历表样式写法,css+html实现简单的日历
这篇文章主要为大家详细介绍了由html.css.javascript结合实现的简单日历,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 web页面中很多地方都会用到日历显示,选择等,本文用html. ...
带图片的日历html,js css+html实现简单的日历
web页面中很多地方都会用到日历显示,选择等,本文用html.css.javascript实现简单的日历.完成以后的效果与页面左侧的效果差不多,可以切换上个月.下个月.也可以根据实际情况进行扩展. h ...
php日历css样式,css+html实现简单的日历
这篇文章主要为大家详细介绍了由html.css.javascript结合实现的简单日历,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 web页面中很多地方都会用到日历显示,选择等,本文用html. ...
用html制作简单日历,CCS小技巧，如何使用CSS Grid制作简单的日历，简单有趣
原标题:CCS小技巧,如何使用CSS Grid制作简单的日历,简单有趣日历是人类文明的重要工具之一.然后可以记住许多重要事件,并从事件的确切日期追溯到真相. 在本文中,我们将学习如何利用CSS Gr ...
HTML+CSS+Javascript制作简单版网页时钟
HTML+CSS+Javascript制作简单版网页时钟 <!DOCTYPE html> <html><head><meta charset="ut ...
用CSS写一个简单的幻灯片效果页面
这里是修真院前端小课堂,本篇分析的主题是 [用CSS写一个简单的幻灯片效果页面] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
使用HTML+CSS完成一个简单的立体字效果
使用HTML+CSS完成一个简单的立体字效果* 此处用木兰辞来举列子来看看效果 ps:技术不佳大佬们轻喷 /*标题及其立体效果*/ .Header {/*font-size: 50px;*//*fo ...
HTML+CSS+JavaScript实现轮播图效果
前言先奉上本文需要的所有资源,免费下载,代码有详细注释,可搭配本文使用: 前端JavaScript实现轮播图效果百度网盘:百度网盘请输入提取码提取码:slbt 没有添加动画效果,添加了自动切换 ...

HTML+CSS+JavaScript实现简单的日历效果

HTML+CSS+JavaScript实现简单的日历效果相关推荐

最新文章

热门文章