<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.calendar-wrapper {
width: 500px;
height: 550px;
background-color: antiquewhite;
margin: 100px auto;
}
.calendar-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 50px;
box-sizing: border-box;
padding: 0 10px;
}
.actions {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
line-height: 50px;
}
.actions .title {
width: 124px;
text-align: center;
}
.actions .btn {
background-color: rgb(0, 51, 153);
color: rgb(255, 255, 255);
padding: 0 20px;
cursor: pointer;
user-select: none;
}
.calendar-header span {
line-height: 50px;
font-size: 18px;
}
.calendar-content {
width: 100%;
height: 480px;
}
.calendar-content span {
float: left;
width: 14.28%;
height: 75px;
line-height: 75px;
text-align: center;
}
.calendar-content span.active {
color: red;
box-sizing: border-box;
border: 1px solid red;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="calendar-wrapper">
<div class="actions">
<div class="btn prev-year">上一年</div>
<div class="btn prev">上一月</div>
<div class="title">当前日期</div>
<div class="btn next">下一月</div>
<div class="btn next-year">下一年</div>
</div>
<div class="calendar-header">
<span>周一</span>
<span>周二</span>
<span>周三</span>
<span>周四</span>
<span>周五</span>
<span>周六</span>
<span>周日</span>
</div>
<div class="calendar-content">
</div>
</div>
<script type="text/javascript">
/*
<div class="calendar-wrapper">
<div class="actions">
<div class="btn prev-year">上一年</div>
<div class="btn prev">上一月</div>
<div class="title">当前日期</div>
<div class="btn next">下一月</div>
<div class="btn next-year">下一年</div>
</div>
<div class="calendar-header">
<span>周一</span>
<span>周二</span>
<span>周三</span>
<span>周四</span>
<span>周五</span>
<span>周六</span>
<span>周日</span>
</div>
<div class="calendar-content">
</div>
</div>
*/
;
(function() {
var oCalendarHeader = document.getElementsByClassName('calendar-header')[0],
oCalendarContent = document.getElementsByClassName('calendar-content')[0],
oTitlte = document.getElementsByClassName('title')[0],
oPrev = document.getElementsByClassName('prev')[0],
oNext = document.getElementsByClassName('next')[0],
oPrevYear = document.getElementsByClassName('prev-year')[0],
oNextYear = document.getElementsByClassName('next-year')[0],
yearG = 0,
monthG = 0;
/**
* 初始化函数
*/
function init() {
render();
bindEvent();
}
function bindEvent() {
oPrev.addEventListener('click', function() {
updateRender('prev')
}, false);
oNext.addEventListener('click', function() {
updateRender('next')
}, false);
oPrevYear.addEventListener('click', function() {
updateRender('prev_year')
}, false);
oNextYear.addEventListener('click', function() {
updateRender('next_year')
}, false);
}
function render() {
renderElement()
}
function updateRender(tag) {
oCalendarContent.innerHTML = '';
switch (tag) {
case 'prev':
monthG -= 1;
if (monthG == 0) {
monthG = 12;
yearG -= 1;
}
renderElement(yearG, monthG)
break;
case 'next':
monthG += 1;
if (monthG == 13) {
monthG = 1;
yearG += 1;
}
renderElement(yearG, monthG)
break;
case 'prev_year':
yearG -= 1;
renderElement(yearG, monthG)
break;
case 'next_year':
yearG += 1;
renderElement(yearG, monthG)
break;
}
}
function renderElement(year, month) {
var year = year || new Date().getFullYear(),
month = month || new Date().getMonth() + 1;
var dateObj = getDateObject({
year,
month
}),
days = dateObj.days,
currentMonthOneDayisWeek = dateObj.week,
currentDay = dateObj.currentDay;
oTitlte.innerHTML = `${year}年${month}月${currentDay}日`;
yearG = year;
monthG = month;
for (var i = 1; i <= 42; i++) {
if (i == (days + currentMonthOneDayisWeek)) {
break;
}
var oSpan = document.createElement('span');
if (currentMonthOneDayisWeek == 0) {
currentMonthOneDayisWeek = 7
}
if (i === currentMonthOneDayisWeek) {
oSpan.innerHTML = i - currentMonthOneDayisWeek + 1;
} else {
if (i == (currentDay + currentMonthOneDayisWeek - 1)) {
oSpan.className = 'active';
}
if (i > currentMonthOneDayisWeek) {
oSpan.innerHTML = i - currentMonthOneDayisWeek + 1;
}
}
oCalendarContent.appendChild(oSpan)
}
}
/**
* 获取需要的时间
* @param {Object} options
*/
function getDateObject(options) {
var d = new Date(),
year = options && options.year || d.getFullYear(),
month = options && options.month || d.getMonth() + 1,
days = new Date(year, month, 0).getDate(), //当前月份一共多少天 给个数组也行哈 主要看看是不是闰年
week = new Date(year, month - 1, 1).getDay(), //获取当前月第一天是周几
currentDay = d.getDate(); //今天是哪天
return {
year,
month,
days,
week,
currentDay
}
}
init()
})();
</script>
</body>
</html>
JS随手小日历
最新推荐文章于 2022-06-03 15:54:26 发布