原生Js实现日历挂件
本文实例为大家分享了js实现日历挂件的具体代码，供大家参考，具体内容如下
Csscode
/*************************
*日历样式对应表
*#date日历块
*table表格
*th头部
*td身体
*a.now本月
*a.non-arrival其他月
*a.day今天
*a.href链接
*#date_diglogs记住对话框
*************************/
#date{
width:220px;
padding-bottom:5px;
box-shadow:01px3px#ccc;
border:1pxsolid#EDEDED;
}
#datetable{
width:inherit;
user-select:none;
font-size:12px;
border-collapse:collapse;
border-spacing:0px;
}
#datetabletrth{
background-color:#f8f8f8;
color:#5e5f63;
}
#datetabletr:nth-of-type(2)th{
font-weight:300;
}
#datetabletrtd{
text-align:center;
font-family:"ComicSansMS";
padding:2px0;
}
#datetabletrtda{
text-decoration:none;
}
#datetabletrtda.now{
color:#757575;
}
#datetabletrtda.day{
background:mediumblue;
text-decoration:underline;
color:#fff;
}
#datetabletrtda.href{
border:1pxsolid#ccc;
transition:all1slinear;
}
#datetabletrtda.href:hover{
border:1pxdotted#5E5F63;
background:gold;
}
#datetabletrtda.non-arrival{
color:#ccc;
}
.date_diglogs{
font-size:10px;
background:#fff;
padding:2px5px;
border-radius:3px;
box-shadow:01px3px#ccc;
border:1pxsolid#EDEDED;
color:#757575;
}
Jscode
/*2021/2/26
*功能:日历挂件
*清源妙善
*/
functionBlogDate(nowDate){
/*可变数据*/
this.year=nowDate.getFullYear();//获取年份
this.month=nowDate.getMonth();//获取月份
this.day=nowDate.getDate();//获取今天是几号
this.week=newDate(this.year,this.month,1).getDay();//获取每月前面的空余天数
this.days=newDate(this.year,this.month+1,-1).getDate()+1;//获取总共有几天
this.last_month=newDate(this.year,this.month,-1).getDate()+1;//保存上个月的天数
/*不变数据*/
this.now_year=nowDate.getFullYear();//保存今年的年份
this.now_month=nowDate.getMonth();//保存今年的月份
}
BlogDate.prototype.createDate=function(name){
//获取块与创建表格
letdate_div=document.getElementById('date');
letdate_table=document.createElement('table');
date_div.appendChild(date_table);
//创建所有的tr标签
letdate_all_tr=newArray();
for(letn=0;n<8;n++){
date_all_tr[n]=document.createElement('tr');
date_table.appendChild(date_all_tr[n]);
}
//创建头部th标签
letdate_head_th=newArray();
for(letn=0;n<3;n++){
date_head_th[n]=document.createElement('th');
date_all_tr[0].appendChild(date_head_th[n]);
}
//设置特殊元素属性
date_head_th[0].setAttribute('id','prev');
date_head_th[1].setAttribute('colspan','5');
date_head_th[1].setAttribute('title',`${name}`);
date_head_th[2].setAttribute('id','next');
//创建星期th标签
letdate_week_th=newArray();
for(letn=0;n<7;n++){
date_week_th[n]=document.createElement('th');
date_all_tr[1].appendChild(date_week_th[n]);
}
//创建身体td,a标签数组
letdate_body_td=newArray();
letdate_body_td_a=newArray();
//创建身体td,a标签实体
for(letn=2,i=0;n<8;n++,i++){
date_body_td[i]=[];
date_body_td_a[i]=[];
for(letm=0;m<7;m++){
date_body_td[i][m]=document.createElement('td');
date_body_td_a[i][m]=document.createElement('a');
date_body_td[i][m].appendChild(date_body_td_a[i][m]);
date_all_tr[n].append(date_body_td[i][m]);
}
}
}
BlogDate.prototype.setBlogDate=function(newDate){
/*更新数据*/
this.year=newDate.getFullYear();//获取年份
this.month=newDate.getMonth();//获取月份
this.day=newDate.getDate();//获取今天是几号
this.week=newDate(this.year,this.month,1).getDay();//获取每月前面的空余天数
this.days=newDate(this.year,this.month+1,-1).getDate()+1;//获取总共有几天
this.last_month=newDate(this.year,this.month,-1).getDate()+1;//获取上个月的天数
}
BlogDate.prototype.updateTime=function(blogs_date){
//获取日历对象
letdate_div=document.getElementById('date');
letdate_table=date_div.getElementsByTagName('table')[0];
//创建日历头部tr,th
letdate_head_tr=date_table.getElementsByTagName('tr')[0];
letdate_head_th=date_head_tr.getElementsByTagName('th');
//创建头部数据
letdate_head_arr=[
'<',`${this.year}年${this.month+1}月`,'>'
];
//更新头部数据
for(letn=0;n=0;n--,last_month--){
date_body_td_a[n].textContent=last_month;
date_body_td_a[n].setAttribute('class','non-arrival');
}
//设置现在月份的天数(现)
for(letn=this.week,i=1;i<=this.days;n++,i++){
date_body_td_a[n].textContent=i;
//如果今年今月今日,设置day样式,其余now样式
if((i==this.day)&&
(newDate(this.year,this.month,1).getMonth()==this.now_month)&&
(newDate(this.year,this.month,1).getFullYear()==this.now_year)){
date_body_td_a[n].setAttribute('class','day');
}else{
date_body_td_a[n].setAttribute('class','now');
}
}
//设置其他月份的天数(后)
for(letn=this.week+this.days,i=1;n
Htmlcode
datehtml
Hello
效果
参考链接：jquery实现日历效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。