简版js日历（原创）

Html

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;
}

var oContent = document.getElementById('content');
 var oCurrent = document.getElementById('current');
 var oPrev = document.getElementById('prev');
 var oNext = document.getElementById('next');
 // 第一 算出42天对应的日 
 // 第二 把日期正确的放进ul

var date = new Date();

// getCurrentDays(date);

renderUl(getPrevDays(date), getCurrentDays(date));
 renderHead(date);

oPrev.onclick = function() {

date.setDate(0);

renderUl(getPrevDays(date), getCurrentDays(date));
     renderHead(date);

}

oNext.onclick = function() {

date.setDate(1);

date.setMonth(date.getMonth() + 1);

renderUl(getPrevDays(date), getCurrentDays(date));
     renderHead(date);

}

function getCurrentDays(date) { // 计算当前月的天数

var date = new Date(date);

date.setDate(1);

date.setMonth(date.getMonth() + 1);

date.setDate(0);

var days = date.getDate();

var list = [];

for (var i = 1; i <= days; i++) {
         list.push(i);
     }

return list;

}

function getPrevDays(date) {

// 留几天？ 最后一天是多少号？

// 28 29 30

// 29 30 31

var date = new Date(date);

date.setDate(1);

var week = date.getDay();

date.setDate(0);

var maxDay = date.getDate();

var list = [];

// 31
     // 4

for (var i = maxDay - week + 1; i <= maxDay; i++) {
         list.push(i);
     }

return list;

}

function renderUl(prevDays, currentDays) {

var html = '';

for (var i = 0; i < prevDays.length; i++) {
         html += `<li style="color: red">${prevDays[i]}</li>`
     }

for (var i = 0; i < currentDays.length; i++) {
         html += `<li>${currentDays[i]}</li>`
     }

for (var i = 1; i <= 42 - currentDays.length - prevDays.length; i++) {
         html += `<li style="color: red">${i}</li>`
     }

oContent.innerHTML = html;

}

function renderHead(date) {
     var year = date.getFullYear();
     var month = date.getMonth() + 1;
     oCurrent.innerText = year + '-' + month;
 }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

简版js日历（原创）

代码描述：简版js日历代码

更新时间：2020-06-28 00:04:54

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

?

相关代码

简版js日历（原创）

最新