爱站程序员基地本文实例为大家分享了JS实现简易日历效果的具体代码，供大家参考，具体内容如下
css
* {margin: 0;padding: 0;list-style: none;}#box {width: 280px;height: 360px;margin: 50px auto;background-color: black;color: aliceblue;line-height: 40px;}#header {height: 40px;color: aliceblue;line-height: 40px;}#header span {float: left;text-align: center;margin-top: 10px;line-height: 40px;}#prev,#next {width: 20%;line-height: 40px;cursor: pointer;}#current {width: 60%;line-height: 40px;}#week li {width: 40px;text-align: center;float: left;line-height: 40px;}#content li {width: 40px;text-align: center;float: left;line-height: 40px;}
html
<div id=\"box\"><div id=\"header\"><span id=\"prev\">上</span><span id=\"current\"></span><span id=\"next\">下</span></div><ul id=\"week\"><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul><ul id=\"content\"><!-- <li>31</li><li>1</li><li>2</li> --></ul></div>```
js
var current = document.querySelector(\'#current\');//月份namevar prev = document.querySelector(\'#prev\'); // 上个月var next = document.querySelector(\'#next\'); // 下个月var content = document.querySelector(\'#content\'); // 日期内容// 上个月要显示的天数// 求出本月第一天是星期几// 求出上个月最大的天数 把日期设为0function getPrevDays(date) {var date = new Date(date);// 把日期设为第一天，为了获取第一天是星期几date.setDate(1);var week = date.getDay();// 把日期设为0，为了得到上个月的最后一天date.setDate(0);var maxDay = date.getDate();var list = [];// 遍历红色日期的范围 push进数组for (var i = maxDay - week + 1; i <= maxDay; i++) {list.push(i);}return list;}// 求本月的天数// 月份推到下个月// 日期设为0function getNowDays(date) {var date = new Date(date);date.setMonth(date.getMonth() + 1);date.setDate(0);var maxDay = date.getDate();// console.log(maxDay)var list = [];//for (var i = 1; i <= maxDay; i++) {list.push(i)}return list;}// 下个月要显示的天数function getNextDays(prevDays, nowDays) {var list = [];// 一页日历42天，42 - 上月天数 - 这个月天数 = 最后显示剩余的下个月天数for (var i = 1; i <= 42 - prevDays - nowDays; i++) {list.push(i)}return list}var x = 1;// 封装输出日期内容// x记录点击月份 根据月份 上面数组自动获取当月要显示的时间function output(x) {arr1 = getPrevDays(\'2021-\' + x);arr2 = getNowDays(\'2021-\' + x);arr3 = getNextDays(arr1.length, arr2.length);// console.log(arr2);var res = \'\';for (var i = 0; i < arr1.length; i++) {res += \'<li style=\"color:red;\">\';res += arr1[i];res += \'</li>\';}for (var i = 0; i < arr2.length; i++) {res += \'<li>\';res += arr2[i];res += \'</li>\';}for (var i = 0; i < arr3.length; i++) {res += \'<li style=\"color:red;\">\';res += arr3[i];res += \'</li>\';}// 三个数组输出结果拼接起来 输出return content.innerHTML = res;}// 输出月份显示var date = new Date();current.innerHTML = showMonth(new Date());// 月份function showMonth(date) {var date = new Date(date);date.setMonth(date.getMonth());var mon = date.getMonth();// var year = date.getFullyear();return (mon + 1) + \'月\';}output(x);// 下个月next.onclick = function () {x++;// console.log(x);if (x > 12) {x = 1;output(x);} else {current.innerHTML = showMonth(\'2021-\' + x);output(x);}}// 上个月prev.onclick = function () {x--;console.log(x);if (x < 1) {x = 12;current.innerHTML = showMonth(\'2021-\' + x);output(x);} else {current.innerHTML = showMonth(\'2021-\' + x);output(x);}}
以上就是本文的全部内容，希望对大家的学习有所帮助
