原生js实现日历效果

时间：2021-05-25

本文实例为大家分享了js实现日历效果的具体代码，供大家参考，具体内容如下

html代码

<!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>日历插件</title> <link rel="stylesheet" href="./css/reset.css" > <link rel="stylesheet" href="./css/index.css" ></head><body> <div class="show"> <button id="pre">上月</button> <span id="showtime">2019-01</span> <button id="next">下月</button> </div> <div class="box" id="box"> </div></body><script> // 获取本月第一天 function getMonthDay(date){ date=new Date(date.valueOf()) date.setDate(1); return date } // 获取本月最后一天 function getMonthLastDay(date){ date=new Date(date.valueOf()) date.setMonth(date.getMonth()+1); date.setDate(0); return date } //获取本月的时间对象集合 function getMonth(date){ var arr=[] // 获取本月第一天 var _date=getMonthDay(date) // // 获取本月最后一天 var dataLast=getMonthLastDay(date).getDate() arr.push(new Date(_date.valueOf())) // 处理本月第一天 到本月最后一天 for(var i =1;i<dataLast;i++){ _date.setDate(_date.getDate()+1) arr.push(new Date(_date.valueOf())) } // 向前补全，重置为本月一号 _date=getMonthDay(date) var forln=_date.getDay() for(var i=0;i<forln;i++){ _date.setDate(_date.getDate()-1) arr.unshift(new Date(_date.valueOf())) } // 向后补全,重置为本月最后一天 _date=getMonthLastDay(date) forln=_date.getDay() for(var i=forln;i<6;i++){ _date.setDate(_date.getDate()+1) arr.push(new Date(_date.valueOf())) } return arr } // 将集合渲染到页面 function renderTable(monthDateArr,date){ document.getElementById("showtime").innerHTML=`${date.getFullYear()}-${date.getMonth()+1}` var table=document.createElement('table') var trTh=document.createElement('tr') trTh.innerHTML=` <th>周日</th> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th>周六</th> ` table.appendChild(trTh) var tr=document.createElement('tr') for(let i in monthDateArr){ var td=document.createElement('td') td.innerHTML=monthDateArr[i].getDate() tr.appendChild(td) if((i*1+1)%7===0){ table.appendChild(tr) tr=document.createElement('tr') }else if(i == monthDateArr.length-1){ table.appendChild(tr) } } document.getElementById("box").innerHTML=table.outerHTML } var date=new Date() document.getElementById('pre').onclick=function(){ date.setDate(1) date.setMonth(date.getMonth()-1) renderTable(getMonth(date),date) } document.getElementById('next').onclick=function(){ date.setDate(1) date.setMonth(date.getMonth()+1) rrenderTable(getMonth(date),date) } renderTable(getMonth(date),date) </script></html>

css代码

.box{ width: 700px; margin: 0 auto; box-sizing: border-box; padding: 0 1px;}table{ width: 100%;}th,td{ width:100px; text-align: center;}th{ height: 30px; line-height: 30px; background: #e0e5e5;}td{ height: 70px; line-height: 70px; background: #f3f5f5;}.show{ display: flex; align-items: center; justify-content: center;}

更多精彩内容请点击专题《javascript日历插件使用方法汇总》进行学习

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章