js 实现简单日历效果
2019-04-28 19:21
585 查看
主要理解js部分的实现逻辑,HTML和css部分都可按自己项目操作。
html部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/class.css"> </head> <body> <div class="all"> <div class="rili"> <div class="riliTop"> <span id="previous" class="fl"><</span> <span class="showTime" id="showTime">0000-00</span> <span id="next" class="fr">></span> </div> <ul class="riliHeader"> <li>日</li> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li>六</li> </ul> <ul class="riliContent" id="riliContent"> </ul> </div> </div> <script src="js/class.js"></script> </body> </html>
CSS部分
*{ margin: 0; padding: 0; } .all { margin-right: auto; margin-left: auto; } .clock{ width:320px; text-align: center; margin-left:auto; margin-right:auto; transition: all 1s; } .rili{ margin-left: auto; margin-right: auto; width: 350px; border:1px #ddd solid; } ul,li,ol{ list-style: none; } .riliHeader{ height: 50px; border-bottom:1px #ddd solid; background: #eee; } .riliHeader li, .riliContent li{ float: left; width: 48px; height: 48px; line-height: 48px; font-size: 16px; text-align: center; border:1px #ddd solid; } .riliContent{ height: 300px; } .riliContent li.on{ color: #f00; } .fl{ float: left;} .fr{ float: right;} #previous,#next{cursor: pointer; margin:15px;width:15px; height:15px;border-radius: 15px;background: white;display: block;text-align:center;line-height: 15px;} .riliTop .showTime{ height: 50px; line-height: 50px; margin-left: 50%; display: inline-block; position: relative; left: -65px; } .riliTop{ background: #55a532; }
JS部分
{ let riliContent=document.getElementById('riliContent'); let showTime=document.getElementById('showTime'); let previous=document.getElementById('previous'); let next=document.getElementById('next'); let newDate = new Date(); let yearNum = newDate.getFullYear(); let monthNum = newDate.getMonth(); let dateNum = newDate.getDate(); let everyday = function(days){ let year = days.getFullYear(); let month = days.getMonth()+1; let lastDay = new Date(year,month,0); let lastDay_date = lastDay.getDate();//这个月的最后一天 let firstDay = new Date(year,month-1,1); let firstDay_day = firstDay.getDay();//这个月第一天 //上个月的最后一天 let pDay =new Date(year,month-1,0); let last_p_day =pDay.getDate(); let n=0;//前几个灰色数生成 for (let j =0;j<firstDay_day;j++) { n++; let LI = document.createElement("li"); last_p_days = last_p_day - firstDay_day; LI.innerHTML = last_p_days+n; LI.style.color = "#ddd"; riliContent.appendChild(LI); } //本月数生成 for (let i = 1; i <= lastDay_date; i++) { let LI = document.createElement("li"); LI.innerHTML = i; (year === newDate.getFullYear() && month === newDate.getMonth()+1 && newDate.getDate() === i)&& (LI.style.color ="red"); riliContent.appendChild(LI); } for (let m=1; m<=42-lastDay_date-firstDay_day;m++) { let LI = document.createElement("li"); LI.innerHTML = m; LI.style.color = "#ddd"; riliContent.appendChild(LI); } showTime.innerHTML = year +"-" + month; }; previous.addEventListener("click",function () { riliContent.innerHTML =""; monthNum--; everyday(new Date(yearNum,monthNum,dateNum)); }); next.addEventListener("click",function () { riliContent.innerHTML =""; monthNum++; everyday(new Date(yearNum,monthNum,dateNum)); }); everyday(newDate); }
相关文章推荐
- js编写当天简单日历效果【实现代码】
- js基础练习---获取数组内容实现简单日历的效果
- js编写当天简单日历效果【实现代码】
- js实现简单的星级选择器提交效果适用于评论等
- 简单实现js拖拽效果
- 用js实现简单的点击返回顶部效果
- vue.js实现简单轮播图效果
- JS实现超简单的鼠标拖动效果
- 纯JS实现简单的日历
- 基于JS分页控件实现简单美观仿淘宝分页按钮效果
- js实现简单易用的上下无缝滚动效果
- js实现省市联动效果的简单实例
- 实现一个简单的JS效果
- JS简单实用的倒计时效果实现代码
- JS+CSS实现简单的二级下拉导航菜单效果
- 原生js实现简单的倒计时效果
- 用js实现简单的左右两边固定广告效果
- 一个js简单的日历显示效果的函数
- 利用JS实现简单的瀑布流加载图片效果
- 简单的js实现放大镜效果