本文主要是介绍JS实现日历表，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
有需要的可以用一下，这是一个简单的demo.
HTML：
<table><thead><tr><th colspan="2"><span class="left">«</span></th><th colspan="3"><span class="time"></span></th><th colspan="2"><span class="right">»</span></th></tr><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr></thead><tbody class="main"></tbody></table>CSS：
<style>table {width: 320px;background: #ffffff;color: #000000;}td,th {text-align: center;height: 30px;}</style>JS:
<script>var oTime = document.querySelector(".time") //头部年月标题显示var oMain = document.querySelector(".main") //主体日历数字显示var leftBtn = document.querySelector(".left"); //点击左边的按钮，月份减少var rightBtn = document.querySelector(".right"); //点击右边的按钮，月份增加var time = new Date(); //获取当前系统时间leftBtn.onclick = function() {time.setMonth(time.getMonth() - 1);getPrevDays(time);getCurrentDays(time);minHead(time);mainList(time, getPrevDays(time), getCurrentDays(time));}rightBtn.onclick = function() {time.setMonth(time.getMonth() + 1);getPrevDays(time);getCurrentDays(time);minHead(time);mainList(time, getPrevDays(time), getCurrentDays(time));}function minHead(time) {oTime.innerText = time.getFullYear() + "年" + (time.getMonth() + 1) + "月"}function mainList(time, prevDays, currentDays) {var beforeCount = prevDays.length + currentDays.length;var cellList = document.querySelectorAll("td");for (var i = 0; i < prevDays.length; i++) { //上一个月所占格子cellList[i].innerHTML = "<font color='#D3D5DA'>" + prevDays[i] + "</font>"}for (var i = 0; i < currentDays.length; i++) { //当前月所占格子if (currentDays[i] == time.getDate()) { //当天日期高亮显示cellList[i + prevDays.length].innerHTML = "<font color='blue'>" + currentDays[i] + "</font>";} else { //当月日期白色突出cellList[i + prevDays.length].innerHTML = "<font color='#000000'>" + currentDays[i] + "</font>";}}for (var i = 1; i <= (42 - beforeCount); i++) { //下个月所占格子cellList[i + beforeCount - 1].innerHTML = "<font color='#D3D5DA'>" + i + "</font>"}}function createCells() {for (var i = 0; i < 6; i++) { //6行var oTr = document.createElement("tr");for (var j = 0; j < 7; j++) { //7列var oTd = document.createElement("td");oTr.appendChild(oTd);}oMain.appendChild(oTr);}}function getPrevDays(time) { //获得上一个在本月所占的天数var time = new Date(time); //拷贝一份时间，避免时间修改发生冲突var list = []; //上一个月所占的天数time.setDate(1); //设置成当月1号，便于查看是星期几；var day = time.getDay() == 0 ? 7 : time.getDay(); //如果是0，说明数字第一行需要空出来放上一个月的时间//获取上一个月的天数time.setDate(0); //系统自动计算到上一个月的最后一天var maxDay = time.getDate(); //得到上一个月的最后一天时间for (var i = maxDay; i > (maxDay - day); i--) {//根据maxDay和day之间的关系，把上一个月的时间放到list中list.push(i);}list.reverse(); //日期升序排列return list;}function getCurrentDays(time) { //获取当前月的天数var time = new Date(time); //拷贝时间，原因同上time.setDate(1); //确保不会出现跨越现象 如果当前时间是1月31号就会出现跨越到三月份的事情var list = [];//下面代码是为了获取上一个月的天数time.setMonth(time.getMonth() + 1) //修改时间到下一个月time.setDate(0); //修改时间日期是0var maxDay = time.getDate();//获取到上一个月的日期并放到数组中for (var i = 1; i <= maxDay; i++) {list.push(i);}return list;}createCells(); //创建6行7列表格getPrevDays(time); //获取上一个月在当前月所占的格子数getCurrentDays(time); //获取当前月所占的格子数minHead(time); //显示头部标题mainList(time, getPrevDays(time), getCurrentDays(time)); //显示主题日历</script>这篇关于JS实现日历表的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
