使用JavaScript制作简单日历

使用JavaScript制作如上图的简单日历，这里有两种做法：

第一种:

// 定义一个构造函数
function Calender(month){
var div
// 定义一个属性表示当前要展示的一个月份
this.currentMonth = month || new Date()
// 如果调用者每一传递month参数
// 那么this.currentMonth = month
// 如果调用者没有传递month参数
// 或者传了被认为false的值
// 那么this.currentMonth = new Date()
// 将当前的月份的日期设置为1号
this.currentMonth.setDate(1)
// 获取当前展示月的第一天
this.getFirstDate = function(){
var week = this.currentMonth.getDay()
if(week == 0) week = 7
week -= 2 // week = week -2
var firstDate = new Date(this.currentMonth)
// 得到星期一是几月几号
firstDate.setDate(-week)
// 将firstDate返还给本函数的调用者
return firstDate
}
// 显示日历的主体部分
this.showCalenderMain = function(){
div = document.createElement('div')
div.style.width = '450px'
div.style.minHeight = '100px'
div.style.backgroundColor = 'red'
document.body.appendChild(div)
}
// 展示日历的表头部分
this.showHeader = function(){
var table =document.createElement('table')
table.style.width = '100%'
// 在表格中插入一行
var tr = table.insertRow()
function getWeekName(week){
switch(week){
case 1:
return '一'
case 2:
return '二'
case 3:
return '三'
case 4:
return '四'
case 5:
return '五'
case 6:
return '六'
case 7:
return '日'
}
}
for(var i =1;i <= 7;i++){
var td = tr.insertCell()
td.style.color = 'white'
td.style.textAlign = 'center'
td.innerHTML =getWeekName(i)
}
div.appendChild(table)
}
this.showBody = function(){
var firstDate = this.getFirstDate().getTime()
var table = document.createElement('table')
table.style.width = '100%'
for(var i = 0;i<6;i++){
var tr = table.insertRow()
for(var j = 0;j < 7;j++){
var td = tr.insertCell()
td.style.textAlign = 'center'
td.style.color = 'white'
td.style.height = '2em'
var n = i * 7 + j
var cellDate = new Date(firstDate + n*24*60*60*1000)
console.log(cellDate)
td.innerHTML = cellDate.getDate()
if(cellDate.getMonth() != this.currentMonth.getMonth()){
td.style.color = 'gray'
}
if(cellDate.getDate() == new Date().getDate() && cellDate.getMonth() == new Date().getMonth()){
td.style.backgroundColor = 'rgba(0,0,255,0.3)'
}
}
}
div.appendChild(table)
}
this.showToobar = function(){
var toolbar = document.createElement('div')
toolbar.style.fontSize = '1.5rem'
toolbar.style.color = 'white'
toolbar.style.padding = '20px'
toolbar.innerHTML = this.currentMonth.getFullYear() + '年' +
(this.currentMonth.getMonth() + 1) + '月'
div.appendChild(toolbar)
var next = document.createElement('span')
next.innerHTML = '　&gt'
next.style.cursor = 'pointer'
next.style.float = 'right'
toolbar.appendChild(next)
var calender = this
next.onclick =function(){
var month = calender.currentMonth.getMonth()
month++
calender.currentMonth.setMonth(month)
document.body.innerHTML = ''
calender.show()
}
var prev = document.createElement('span')
prev.innerHTML = '< '
prev.style.float = 'right'
prev.style.cursor = 'pointer'
toolbar.appendChild(prev)
prev.onclick =function(){
var month = calender.currentMonth.getMonth()
month--
calender.currentMonth.setMonth(month)
document.body.innerHTML = ''
calender.show()
}
}
this.show = function(){
this.showCalenderMain()
this.showToobar()
this.showHeader()
this.getFirstDate()
this.showBody()
}
}
var calender = new Calender()
calender.show()

第二种：

css：

*{
box-sizing: border-box;
user-select:none;
}
html,body{
height: 100%;
font-weight: bold;
font-family: 宋体;
}
section{
width: 450px;
height: 350px;
background-color: red;
padding: 18px;
}
header{
height: 50px;
width: 100%;
color: white;
font-size: 25px;
display: flex;
justify-content: space-between;
}
.currentDay {
color: blue;
}
.currentMonth {
color: white;
}
.otherMonth{
color: #837F7D;
}
.calendar-table{
width: 100%;
border-collapse: collapse;
color: white;
text-align:center;
}
tr{
height: 35px;
line-height: 35px;
}
header>div>span:hover{
cursor: pointer;
}

HTML:

<section>
<header>
<div id="date-title"></div>
<div>
<span id="left"><</span>　
<span id="right">></span>
</div>
</header>
<main></main>
</section>

JavaScript：

var dateObj = (function(){
var date = new Date()
return {
getDate:function(){
return date
},
setDate:function(date1){
date = date1
}
}
})()
function table(){
var dateMain = document.querySelector('main')
var tableTitle = "<tr>" +
"<th>日</th>" +
"<th>一</th>" +
"<th>二</th>" +
"<th>三</th>" +
"<th>四</th>" +
"<th>五</th>" +
"<th>六</th>" +
"</tr>"
var tableBody = ''
for(var i = 0;i < 6;i++){
tableBody += "<tr>" +
"<td></td>" +
"<td></td>" +
"<td></td>" +
"<td></td>" +
"<td></td>" +
"<td></td>" +
"<td></td>" +
"</tr>"
}
dateMain.innerHTML = "<table id='calendarTable' class='calendar-table'>" + tableTitle + tableBody + "</table>"
}
table()
function showDate(){
var yy = dateObj.getDate().getFullYear()
var mm = dateObj.getDate().getMonth() + 1;
var dateTitle = document.querySelector('#date-title')
dateTitle.innerText = yy + '年' + mm + '月'
var table = document.getElementById("calendarTable")
var tds = table.getElementsByTagName('td')
var firstDay = new Date(yy,mm - 1,1)
for(var i = 0;i < tds.length;i++){
var thisDay = new Date(yy,mm - 1,i + 1 - firstDay.getDay())
var thisDayStr = getDateStr(thisDay);
tds[i].innerText = thisDay.getDate()
if(thisDayStr == getDateStr(new Date())) {
tds[i].className = 'currentDay';
}else if(thisDayStr.substr(0, 6) == getDateStr(firstDay).substr(0, 6)) {
tds[i].className = 'currentMonth';
}else {
tds[i].className = 'otherMonth';
}
}
}
showDate()
var left = document.getElementById("left");
var right = document.getElementById("right");
left.addEventListener('click',function(){
var date = dateObj.getDate();
dateObj.setDate(new Date(date.getFullYear(), date.getMonth() - 1, 1));
showDate();
})
right.addEventListener('click',function(){
var date = dateObj.getDate();
dateObj.setDate(new Date(date.getFullYear(), date.getMonth() + 1, 1));
showDate();
})
function getDateStr(date) {
var yy = date.getFullYear();
var mm = date.getMonth() + 1;
var dd = date.getDate();
mm = (mm > 9) ? ("" + mm) : ("0" + mm);
dd = (dd > 9) ? ("" + dd) : ("0" + dd);
return yy + mm + dd;
}

演示效果：

第一种、第二种

发送评论编辑评论

发送评论 编辑评论

推荐文章

发送评论编辑评论