简易的日历

最新推荐文章于 2024-09-20 14:39:18 发布

安心一点

最新推荐文章于 2024-09-20 14:39:18 发布

阅读量76

点赞数

文章标签： css html5 html

本文链接：https://blog.csdn.net/AICE1/article/details/120482002

版权

<style>

* {

padding: 0;

margin: 0;

list-style: none;

}

.box {

width: 280px;

padding: 20px;

background-color: #000;

color: #fff;

margin: auto;

}

.box p {

display: flex;

justify-content: space-between;

line-height: 30px;

}

ul {

display: flex;

margin-top: 20px;

flex-wrap: wrap;

}

li {

width: 40px;

text-align: center;

line-height: 30px;

}

</style>

</head>

<body>

<p>

</p>

<ul>

</ul>

</ul>

</div>

var date = new Date();

var opre = get('prev');

var otime = get('time');

var onext = get('next');

var olist = get('list')

function get(id) {

return document.getElementById(id)

}

opre.onclick = function () {//点击事件不写参数

date.setDate(0);

renderhead(date);

renderul(date)

}

onext.onclick = function () {

date.setDate(32);

renderhead(date);

renderul(date)

}

renderul(date);

function renderul(date) {

var res = '';

var list1 = now(date);

var list2 = prev(date);

for (var i in list2) {

res += `<li style="color:green;">${list2[i]}</li>`

}

//顺序不可以错

for (var i in list1) {

res += `<li>${list1[i]}</li>`

}

for (var i = 1; i <= 42 - list1.length - list2.length; i++) {

res += `<li style="color:green;">${i}</li>`

}

olist.innerHTML = res;

}

renderhead(date)

function renderhead(date) {

var date = new Date(date);

var year = date.getFullYear();

var mon = date.getMonth() + 1;

otime.innerHTML = year + '-' + mon //忘记怎么渲染！

}

function now(date) {

var date = new Date(date);

date.setDate(40);

date.setDate(0);

var maxday = date.getDate();

// console.log(maxday);

var list = [];

for (var i = 1; i <= maxday; i++) {

list.push(i)

}

// console.log(list);

return list;

}

function prev(date) {

var date = new Date(date);

// 在把天数推到上个月之前，要获取本月的第一天是星期几

date.setDate(1);

var week = date.getDay();

// 本月的第0天也就是上个月的最后一天

date.setDate(0);

var maxDay = date.getDate();

console.log(maxDay); // 31

var list = [];

// 上个月要显示几天实际上跟本月的第一天是星期几有关系？ ? = 31 - week + 2

for (var i = maxDay - week + 2; i <= maxDay; i++) {

list.push(i)

}

console.log(list);

return list

}

安心一点

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫