HTML+CSS+JavaScript实现简单的日历效果 |
您所在的位置：网站首页 › 四月漂亮日历简单制作过程视频 › HTML+CSS+JavaScript实现简单的日历效果 |
HTML+CSS+JavaScript实现简单的日历效果
|
初学前端花了一下午写了一个简单的日历效果： 可以选择按月或者按年切换，当前日期会有绿色的背景显示， 所有的日期都会正确的对应星期几。
所有代码： 简单日历效果 * { 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; } ; ; Mon Tue Wed Thu Fri Sat Sun // 获取年月日和星期几 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 = false selected(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 |
【本文地址】
今日新闻 |
推荐新闻 |