原生js仿博客园日历

2018-07-25 分类：JavaScript 作者：管理员阅读（1016）

仿博客园日历 - 先上一张效果图

仿博客园日历

* 该日历用table布局
* 实现了上一月和下一月的点击渲染效果
* 实现了当前日期的高亮
* 实现了显示月份所有日期高亮
*兼容IOS和Android

* 用到了日期格式化方法dateFormat()
* 跟据日期获取星期方法getWeek()
* 获取加减月数后的日期方法getBeAfDateByMonth()
* 根据日期获取日期所在月的总共天数getMaxDayOfDate()

* 难点:
* 本月日期
* 上一月日期
* 下一月日期

全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿博客园日历</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
</head>
<style>
body,h4{
margin: 0;
padding: 0;
}
body{
position: relative;
}
html,body{
height: 100%;
}
#wrap{
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
text-align: center;
}
#wrap h4{
padding-bottom: 10px;
}
a{
text-decoration: none;
color: red;
}
td,th{
width: 30px;
height: 30px;
box-sizing: border-box;
text-align: center;
}

h4{
text-align: center;
}
#tableBox{
width: 210px;
border: 1px solid #777;
margin: 0 auto;
}
table{
border-collapse: collapse;
}
#tableHead>tbody tr:not(:nth-child(2)) td{
font-size: 14px;
color: #000;
}
#tableHead tbody tr:last-child{
border-top: 1px solid #e2e2e2;
}
#tableConetent>tbody tr td{
font-size: 14px;
}
#tableConetent>tbody tr td:hover{
background-color: #eaeaea;
color: #333;
cursor: pointer;
}
#prev,#next{
cursor: pointer;
}
#prev:hover,#next:hover{
color: red!important;
}
.active{
background:#73d661;
color:#fff!important;
}
</style>
<body>
<div id="wrap">
<h4>仿博客园日历</h4>
<div id="tableBox">
<table id="tableHead">
<tbody>
<tr>
<td id="prev"><</td>
<td colspan="5" align="center" id="details" ></td>
<td id="next">></td>
</tr>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</tbody>
</table>
<table id="tableConetent">
<tbody></tbody>
</table>
</div>
</div>
</body>
<script>
"use strict;"
var prev=document.querySelector('#prev');
var next=document.querySelector('#next');
var details=document.querySelector('#details');
var tbody=document.querySelector('#tableConetent tbody');
var tdStr = '';
for(let i =0;i<6;i++){
tdStr += `<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>`
}
tbody.innerHTML = tdStr;
var aTb=document.querySelectorAll('#tableConetent tbody td');
prev.onclick = function(){calendar(-1)}
next.onclick = function(){calendar(1)}
calendar(0)
function calendar(status){
if(status==0){
details.innerHTML = dateFormat('yyyy年M月');
var curDate=getWeek(dateFormat('yyyy-MM-')+'01');
var n=curDate=='日'?7:curDate=='六'?6:curDate=='五'?5:curDate=='四'?4:curDate=='三'?3:curDate=='二'?2:1;
var arr=[]
//上一月多少天
var prveMonth=getMaxDayOfDate(getBeAfDateByMonth(-1));
//本月多少天
var currMonth=getMaxDayOfDate();
}else if(status==1){
//获取原来的日期
var currYearMonth=details.innerHTML;
//原来的日期转化到格式化日期
var curDate=currYearMonth.replace(/[年月]/g,function(r1){return r1=='年'||'月'?'/':'';})+'01 00:00:00';
var dt=new Date(curDate)
details.innerHTML = getBeAfDateByMonth(1,dt).split('-',2)[0]+'年'+(getBeAfDateByMonth(1,dt).split('-',2)[1]-0)+'月';
var currentDate=getWeek(getBeAfDateByMonth(1,dt));
var n=currentDate=='日'?7:currentDate=='六'?6:currentDate=='五'?5:currentDate=='四'?4:currentDate=='三'?3:currentDate=='二'?2:1;
var arr=[]
//上一月多少天
var prveMonth=getMaxDayOfDate(dateFormat('yyyy-MM-dd',getBeAfDateByMonth(0,curDate)));
//本月多少天
var currMonth=getMaxDayOfDate(dateFormat('yyyy-MM-dd',getBeAfDateByMonth(1,dt)));
}else if(status==-1){
//获取原来的日期
var currYearMonth=details.innerHTML;
//原来的日期转化到格式化日期
var curDate=currYearMonth.replace(/[年月]/g,function(r1){return r1=='年'||'月'?'/':'';})+'01 00:00:00';
var dt=new Date(curDate)
details.innerHTML = getBeAfDateByMonth(-1,dt).split('-',2)[0]+'年'+(getBeAfDateByMonth(-1,dt).split('-',2)[1]-0)+'月';
var currentDate=getWeek(getBeAfDateByMonth(-1,dt));
var n=currentDate=='日'?7:currentDate=='六'?6:currentDate=='五'?5:currentDate=='四'?4:currentDate=='三'?3:currentDate=='二'?2:1;
var arr=[]
//上一月多少天
var prveMonth=getMaxDayOfDate(dateFormat('yyyy-MM-dd',getBeAfDateByMonth(-2,curDate)));
//本月多少天
var currMonth=getMaxDayOfDate(dateFormat('yyyy-MM-dd',getBeAfDateByMonth(-1,dt)));
}
var init=details.innerHTML;
for(var i=prveMonth;i>prveMonth-n;i--){arr.unshift(i)}
for(var j=1;j<currMonth+1;j++){arr.push(j)}
var len=43-arr.length;
for(var k=1;k<len;k++){arr.push(k)}

for(var t=0;t<42;t++){
if(t>=n&&t<=n+currMonth-1){
aTb[t].removeAttribute('class');
if(getDatePart('日')==arr[t]&&dateFormat('yyyy年M月')==init){
aTb[t].className='active';
}else{
aTb[t].style.color='#333';
}
}else{

aTb[t].removeAttribute('style');
aTb[t].style.color='#d2d2d2';
}
aTb[t].innerHTML = arr[t]
}
}
//获取日期加减n月后的日期
function getBeAfDateByMonth(n){
var dt =arguments[1]?new Date(arguments[1]): new Date();
dt.setMonth(dt.getMonth() + n);
return dt.getFullYear()+'-'+(dt.getMonth()+1<10?'0'+(dt.getMonth()+1):(dt.getMonth()+1))+'-'+(dt.getDate()<10?'0'+dt.getDate():dt.getDate())
}
//获取星期
function getWeek(){
var i=arguments[0]?new Date(arguments[0]).getDay():new Date().getDay()
return ['日','一','二','三','四','五','六'][i]
}
//获取日期部分具体信息
function getDatePart(typeName){
var t=arguments[1]?new Date(arguments[1]):new Date();
switch(typeName) {
case '年':
return t.getFullYear();
break;
case '月':
return t.getMonth()+1;
break;
case '日':
return t.getDate();
break;
case '时':
return t.getHours();
break;
case '分':
return t.getMinutes();
break;
case '秒':
return t.getSeconds();
break;
default:
return '';
}
}
//获取日期所在的月份有多少天
function getMaxDayOfDate(){
var dt=arguments[0]?new Date(arguments[0]):new Date()
dt.setMonth(dt.getMonth() + 1)
dt.setDate(1)
dt.setDate(dt.getDate() -1)
return dt.getDate()
}
//日期格式化
function dateFormat(format){
var d=new Date();
var t=arguments[1]?new Date(arguments[1]):d;
var date = {
"M+": t.getMonth() + 1,
"d+": t.getDate(),
"h+": t.getHours(),
"m+": t.getMinutes(),
"s+": t.getSeconds(),
"q+": Math.floor((t.getMonth() + 3) / 3),
"S+": t.getMilliseconds()
};
if (/(y+)/i.test(format)) {
format = format.replace(RegExp.$1, (t.getFullYear() + '').substr(4 - RegExp.$1.length));
}
for (var k in date) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
}
}
return format;
}
</script>
</html>

「三年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(5) 打赏