<script>
function createCalendar(obj){
let day = null ;
let lastDay = null ;
let nowLastDay = null ;
let year = null ;
let month = null ;
//创建总框
let div = document.createElement('div') ;
div.style.userSelect = 'none' ;
div.id = 'cal' ;
div.style.position = 'absolute' ;
div.style.top = obj.top + 'px' ;
div.style.left = obj.left + 'px' ;
div.style.width = obj.width + 'px' ;
div.style.height = obj.height + 'px' ;
div.style.border = `1px solid ${obj.borderColor}` ;
div.style.borderRadius = '3px' ;
document.body.appendChild(div) ;
let cal = document.getElementById('cal') ;
//创建头部
let header = document.createElement('header') ;
header.style.height = '10%' ;
header.style.borderBottom = `1px solid ${obj.borderColor}` ;
header.style.color = '#ddd' ;
header.style.fontSize = `${obj.width/16}px` ;
header.style.paddingTop = '2.5%' ;
div.appendChild(header) ;
//获取时间
let newDate = new Date() ;
//当前日期
let nowDays = newDate.getDate() ;
//当前年
let nowYears = newDate.getFullYear() ;
//当前月
let nowMonths = newDate.getMonth() + 1 ;
setTime(newDate) ;
let data = ['日','一','二','三','四','五','六'] ;
//头部内容
header.innerHTML = `<span>${year}</span> 年 <span>${month}</span> 月 <span class="prev"><</span><span class="next"> > </span>` ;
let spans = cal.getElementsByTagName('span') ;
for(let i = 0,len = spans.length ; i < len ; i++){
spans[i].style.display = 'inline-block' ;
spans[i].style.verticalAlign = 'top' ;
if(i === 2 || i === 3){
spans[i].style.cursor = 'pointer' ;
changeColor(spans[i]) ;
}
}
//年月日的样式
spans[0].style.marginLeft = '12px' ;
spans[1].style.color = '#888888' ;
spans[2].style.float = 'right' ;
spans[3].style.float = 'right' ;
spans[2].style.marginRight = '46px' ;
spans[3].style.marginRight = '-46px' ;
//创建内容区域
let footer = document.createElement('footer') ;
footer.style.position = 'relative' ;
div.appendChild(footer) ;
footer.innerHTML = `<div class="nowDay" style="height: ${(1/7)*obj.width}px;position: relative;"></div><div class="nowDate" style="width:100%;height: ${(6/7)*obj.width}px;position: absolute;top:${(1/7)*obj.width}px;left: 0; "></div>` ;
let _nowDay = cal.getElementsByClassName('nowDay')[0] ;
let _nowDate = cal.getElementsByClassName('nowDate')[0] ;
_nowDay.innerHTML = createSpan(7) ;
_nowDate.innerHTML = createSpan(42) ;
let spans1 = _nowDay.getElementsByTagName('span') ;
for(let i = 0 ,len = spans1.length ; i < len ; i++){
spans1[i].innerHTML = data[i] ;
}
let next = cal.getElementsByClassName('next')[0] ;
let prev = cal.getElementsByClassName('prev')[0] ;
next.onclick = function(){
createNext() ;
} ;
prev.onclick = function(){
createPrev();
};
createThisMonth() ;
function createThisMonth() {
let spans = _nowDate.getElementsByTagName('span') ;
for(let i = 0 ,len = spans.length ; i < len ; i++){
spans[i].style.backgroundColor = 'white' ;
if (i < day){
spans[i].innerText = nowLastDay - day + i + 1 ;
spans[i].style.color = '#ccc' ;
}
if (i >= day && i < lastDay + day ){
spans[i].innerText = i - (day) + 1;
spans[i].style.color = 'black' ;
if(year === nowYears && month === nowMonths && parseFloat(spans[i].innerText) === nowDays){
spans[i].style.backgroundColor = 'pink' ;
}
}
if (i >= lastDay + day) {
spans[i].innerText = i - (lastDay + day) + 1 ;
spans[i].style.color = '#ccc' ;
}
}
}
function changeColor(obj) {
obj.addEventListener('mouseenter',function () {
this.style.color = '#888888' ;
}) ;
obj.addEventListener('mouseleave',function () {
this.style.color = '#dddddd' ;
}) ;
}
//设置时间
function setTime(times) {
year = times.getFullYear() ;
month = times.getMonth()+1 ;
//获取本月1号日期是星期几
times.setDate(1) ;
day = times.getDay() ;
//获取下个月的0号是多少即本月的最后一天
times.setMonth(month) ;
times.setDate(0) ;
lastDay = times.getDate() ;
//获取上个月的最后一天
times.setDate(0) ;
nowLastDay = times.getDate() ;
}
//生成内容
function createSpan(num) {
let str = '' ;
for(let i = 0 ; i < num ; i++){
str += `<span style="display: inline-block;width: ${obj.width/7}px;height: ${obj.width/7}px;position: absolute;top: ${Math.floor(i/7)*(obj.width/7)}px;background-color: white;border-radius: 50%;text-align: center;line-height: ${obj.width/7}px;font-size: 12px;color: black;left: ${(i%7)*(obj.width/7)}px;"></span>` ;
}
return str ;
}
//下个月
function createNext() {
let nowMonth = parseFloat(spans[1].innerText) ;
let nowYear = parseFloat(spans[0].innerText) ;
if (nowMonth === 12){
nowYear += 1 ;
nowMonth = 0 ;
}
let date = new Date() ;
date.setFullYear(nowYear) ;
date.setMonth(nowMonth) ;
setTime(date) ;
createThisMonth() ;
spans[1].innerHTML = nowMonth+1 ;
spans[0].innerHTML = nowYear ;
}
function createPrev() {
spans[1].innerText = parseFloat(spans[1].innerText) - 1;
let nowMonth = parseFloat(spans[1].innerText);
let nowYear = parseFloat(spans[0].innerText) ;
if(nowMonth === 0){
spans[1].innerText = 12 ;
spans[0].innerText = nowYear - 1;
}
let date = new Date() ;
date.setMonth(nowMonth-1) ;
date.setFullYear(nowYear) ;
setTime(date) ;
createThisMonth() ;
}
}
createCalendar({
left:100,
top:100,
width:325,
height:380,
borderColor:'#ccc'
}) ;
</script>
09-02