前言：
目前大家对“css设计日期”大约比较关怀，朋友们都想要知道一些“css设计日期”的相关知识。那么小编同时在网上搜集了一些有关“css设计日期””的相关内容，希望朋友们能喜欢，看官们一起来了解一下吧！<html>
<head></head>
<style>
* {
margin: 0;
padding: 0;
}
.date {
width: 300px;
height: 220px;
border: 1px solid #000;
margin: 100px auto;
}
.title {
/* width: 200px; */
display: flex;
font-size: 12px;
margin: auto;
text-align: center;
justify-content: space-around;
align-items: center;
}
.year {
margin: 0 40px;
display: flex;
flex-direction: column;
}
#week {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
margin: auto;
list-style-type: none;
display: flex;
}
#week li {
display: inline-block;
text-align: center;
flex: 1;
}
#ul {
list-style-type: none;
margin-top: 5px;
}
#ul li {
display: inline-block;
width: 40px;
height: 21px;
text-align: center;
border: 1px solid #fff;
}
.current {
color: red;
}
#ul li:hover {
border: 1px solid red;
}
#prev,
#next {
cursor: pointer;
}
</style>
<body>
<div class="date">
<div class="title">
<span id="prevYear"><上一年</span>
<span id="prev"><上一月</span>
<div class="year">
<span id="year">2021</span>
<span id="month">5月</span>
</div>
<span id="next">下一月></span>
<span id="nextYear"><下一年</span>
</div>
<!-- 用ul做日历 -->
<ul id="week">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul id="ul">
</ul>
</div>
</body>
<script type="text/javascript">
// date对象，方便切换月份，所以设置为全局对向
// let date = new Date();
// // 点击切换月份的事件
// document.getElementById('prev').addEventListener('click', function () {
// date.setMonth(date.getMonth() - 1);
// add();
// })
// document.getElementById('next').addEventListener('click', function () {
// date.setMonth(date.getMonth() + 1);
// add();
// })
// add();
// //制作日历的函数
// function add() {
// // 当前年
// let cYear = date.getFullYear();
// // 当前月
// let cMonth = date.getMonth() + 1;
// // 获取到当前日期
// let cDay = date.getDate();
// // 写入年月
// document.getElementById('year').innerHTML = cYear;
// document.getElementById('month').innerHTML = cMonth + '月';
// let days = new Date(cYear, cMonth, -1);
// // 当前月份的天数
// let n = days.getDate() + 1;
// // 每个月的第一天是星期几
// let week = new Date(cYear, cMonth - 1, 1).getDay();
// let html = '';
// // 写入dom
// for (let i = 0; i < week; i++) {
// html += `<li></li>`
// }
// for (let i = 1; i <= n; i++) {
// if (i == cDay) {
// html += `<li class="current">${i}</li>`
// } else {
// html += `<li>${i}</li>`
// }
// }
// // 一次性插入
// document.getElementById('ul').innerHTML = html
// }
// 改造
// date对象，方便切换月份，所以设置为全局对向
let date = new Date();
// 点击切换月份的事件
document.getElementById('prevYear').addEventListener('click', function () {
date.setFullYear(date.getFullYear() - 1);
add();
})
document.getElementById('prev').addEventListener('click', function () {
date.setMonth(date.getMonth() - 1);
add();
})
document.getElementById('next').addEventListener('click', function () {
date.setMonth(date.getMonth() + 1);
add();
})
document.getElementById('nextYear').addEventListener('click', function () {
date.setFullYear(date.getFullYear() + 1);
add();
})
add();
//制作日历的函数
function add() {
// 当前年
let cYear = date.getFullYear();
// 当前月
let cMonth = date.getMonth() + 1;
// 上个月
let lMonth = date.getMonth();
// 获取到当前日期
let cDay = date.getDate();
// 写入年月
document.getElementById('year').innerHTML = cYear;
document.getElementById('month').innerHTML = cMonth + '月';
let cdays = new Date(cYear, cMonth, -1);
let ldays = new Date(cYear, cMonth - 1, -1);
let cn = cdays.getDate() + 1; // 当前月份的天数
let ln = ldays.getDate() + 1; // 上个月份的天数
let week = new Date(cYear, cMonth - 1, 1).getDay() || 7; // 每个月的第一天是星期几
console.log(cn, '上个月份的天数')
console.log(ln, '上个月份的天数')
console.log(week, '多少天');
let html = '';
let num = 0
// 写入dom
for (let i = (ln - week + 1); i <= ln; i++) {
html += `<li style="color: #ddd;">${i}</li>`
num++
}
for (let i = 1; i <= cn; i++) {
if (i == cDay) {
html += `<li class="current">${i}</li>`
} else {
html += `<li>${i}</li>`
}
num++
}
for (let i = 1; i <= (42 - num); i++) {
html += `<li style="color: #ddd;">${i}</li>`
}
// 一次性插入
document.getElementById('ul').innerHTML = html
}
</script>
</html>
标签： #css设计日期
