ES6日历类
import Utils from "./Utils.js" ;
export default class Calendar {
constructor ( years, months) {
var date = new Date ( ) ;
this . years = years || date. getFullYear ( ) ;
this . months = months || date. getMonth ( ) ;
this . elem = this . createElement ( ) ;
}
createElement ( ) {
if ( this . elem) return this . elem;
let divs = Utils. ce ( "div" , {
width: "373px" ,
height: '378px' ,
border: "1px solid #ffa800" ,
boxShadow: "0 0 4px #ffa800" ,
margin: 'auto' ,
position: "relative"
} ) ;
divs. addEventListener ( "mousedown" , e=> e. preventDefault ( ) )
this . createHead ( divs) ;
this . createDateTable ( divs) ;
return divs;
}
appendTo ( parent) {
parent. appendChild ( this . elem) ;
this . showDate ( ) ;
}
createHead ( parent) {
for ( var i = 0 ; i < 2 ; i++ ) {
var bn = Utils. ce ( "span" , {
fontSize: "24px" ,
top: "10px" ,
position: "absolute" ,
left: i === 0 ? "10px" : "none" ,
right: i === 0 ? "none" : "10px" ,
cursor: "default"
} ) ;
bn. textContent= i=== 0 ? "<" : ">" ;
bn. addEventListener ( "click" ,
e => { this . clickHandler ( e) } ) ;
parent. appendChild ( bn) ;
}
this . title = Utils. ce ( "div" , {
width: "200px" ,
height: "28px" ,
lineHeight: '28px' ,
textAlign: "center" ,
position: "absolute" ,
top: "10px" ,
margin: 'auto' ,
left: "0px" ,
right: "0px"
} ) ;
parent. appendChild ( this . title) ;
}
createDateTable ( parent) {
var headList = [ "日" , "一" , "二" , "三" , "四" , "五" , "六" ] ;
this . table = Utils. ce ( "table" , {
borderCollapse: "collapse" ,
width: "353px" ,
position: "absolute" ,
left: "10px" ,
top: "50px"
} ) ;
for ( var i = 0 ; i < 7 ; i++ ) {
var tr = Utils. ce ( "tr" , null ) ;
for ( var j = 0 ; j < headList. length; j++ ) {
var td = Utils. ce ( "td" , {
height: '54px' ,
padding: "0px" ,
textAlign: "center" ,
color: ( j === 0 || j === 6 )
? "#ffa800" : "#000000" ,
} ) ;
td. textContent= i === 0 ? headList[ j] : "" ;
if ( j === 0 || j === 6 ) td. color = "#ffa800" ;
if ( i === 0 ) continue ;
td. setAttribute ( "day" , "true" ) ;
td. addEventListener ( "mouseover" ,
e => { this . mouseHandler ( e) } ) ;
tr. appendChild ( td) ;
}
this . table. appendChild ( tr) ;
}
parent. appendChild ( this . table) ;
}
setDate ( year, month) {
this . showDate ( year, month- 1 ) ;
}
showDate ( year, month) {
this . table. lastElementChild. style. display = "none" ;
this . elem. style. height = "328px" ;
var date = new Date ( ) ;
if ( year != undefined) {
date. setFullYear ( year) ;
this . years= year;
}
if ( month != undefined) {
date. setMonth ( month) ;
this . months= month;
}
date. setDate ( 1 ) ;
var startWeek = date. getDay ( ) ;
month = date. getMonth ( ) ;
var max = 0 ;
for ( var i = 28 ; i < 33 ; i++ ) {
date. setDate ( i) ;
var m = date. getMonth ( ) ;
if ( m !== month) {
max = i - 1 ;
break ;
}
}
var tds = document. querySelectorAll ( "[day=true]" ) ;
var day = 1 ;
var now = ( new Date ( ) ) . getDate ( ) ;
for ( var i = 0 ; i < tds. length; i++ ) {
if ( i < startWeek || day > max) {
tds[ i] . textContent = "" ;
continue ;
}
tds[ i] . textContent = day;
if ( day === now) {
this . changeBg ( tds[ i] ) ;
}
day++ ;
}
if ( tds. length - 7 < startWeek + max) {
this . table. lastElementChild. removeAttribute ( "style" ) ;
this . elem. style. height = "372px" ;
}
this . title. textContent = this . years + "年"
+ ( this . months+ 1 ) + "月" ;
}
clickHandler ( e) {
if ( e. currentTarget. textContent=== "<" ) {
this . months-- ;
if ( this . months < 0 ) {
this . months = 11 ;
this . years-- ;
}
} else {
this . months++ ;
if ( this . months > 11 ) {
this . months = 0 ;
this . years++ ;
}
}
this . showDate ( this . years, this . months) ;
}
mouseHandler ( e) {
if ( e. currentTarget. textContent. length === 0 ) return ;
this . changeBg ( e. currentTarget) ;
}
changeBg ( elem) {
if ( this . pre) {
this . pre. style. backgroundColor = "white" ;
if ( this . pre. color) {
this . pre. style. color = this . pre. color;
} else {
this . pre. style. color = "#000000" ;
}
}
this . pre = elem;
this . pre. style. backgroundColor = "#ffa800" ;
this . pre. style. color = "white" ;
}
}
日历类如何使用?
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
</ head>
< body>
< script type = " module" >
import Calendar from "./js/Calendar.js" ;
let calendar= new Calendar ( ) ;
calendar. appendTo ( document. body) ;
calendar. setDate ( 2020 , 11 )
</ script>
</ body>
</ html>