微客导航 » 文章资讯 » 基于javascript实现日历功能原理及代码实例

基于javascript实现日历功能原理及代码实例

2023-07-25 18:01:13 340

日历

在学习javascript过程中，菜鸟教程有一个javascript实例---css日历，感觉挺有趣的，在它的基础上增加了一些简单的功能（差点哭辽）。

功能

按照传统日历方式显示该月的每一天。
可以突出显示今天的日期
可以翻阅上一个月和下一个月的日历

实现

step1传统日历布局样式：分别将年份与月份、星期、该月的全部天数采用列表布局，排列组成传统日历的样式。
step2初始化和更新月份：先将列表清空（debug过程中，有一个发现，初始化的列表便存在的一个childNodes，该项目中需要清空），然后再填入前导空白（为了和星期能够对应），再填入具体某一个月的天数。
step3通过document获取列表对象，改变今天对应行的样式（className变化）来突出显示。
其他细节在代码中实现

代码

html代码





CSS日历




	CSS日历
	
		
			❮
			❯
			August

				2016

CSS代码

@charset"UTF-8";
*{box-sizing:border-box;}
ul{list-style-type:none;}
body{font-family:Verdana,sans-serif;}
.center{
text-align:center;
border:3pxsolidgreen;
}

.month{
padding:70px25px;
width:100%;
background:#1abc9c;
}

.monthul{
margin:0;
padding:0;
}

.monthulli{
color:white;
font-size:20px;
text-transform:uppercase;
letter-spacing:3px;
}

.month.prev{
float:left;
padding-top:10px;
}

.month.next{
float:right;
padding-top:10px;
}

.weekdays{
margin:0;
padding:10px0;
background-color:#ddd;
}

.weekdaysli{
display:inline-block;
width:13.6%;
color:#666;
text-align:center;
}

.days{
padding:10px0;
background:#eee;
margin:0;
}

.daysli{
list-style-type:none;
display:inline-block;
width:13.6%;
text-align:center;
margin-bottom:5px;
font-size:12px;
color:#777;
}

.daysliactive{
padding:5px;
background:#1abc9c;
color:white!important;
}
/*Addmediaqueriesforsmallerscreens*/
@mediascreenand(max-width:720px){
.weekdaysli,.daysli{width:13.1%;}
}

@mediascreenand(max-width:420px){
.weekdaysli,.daysli{width:12.5%;}
.daysli.active{padding:2px;}
}

@mediascreenand(max-width:290px){
.weekdaysli,.daysli{width:12.2%;}
}

javascript代码

vardate=newDate();
varyear=date.getFullYear();
varmonth=date.getMonth();
varday=date.getDate();
varweek=date.getDay();
varp=(week-day+1+35)%7+day-1;
varmonthName=[
	"January","February","March","April","May","June","July","August","September","October","November","December"
];
varmonthNum=[
	31,28,31,30,31,30,31,31,30,31,30,31
];
varweekName=[
	"Su","Mo","Tu","We","Th","Fr","Sa"
];
varaimmonth=month,aimyear=year;

functioninit(){
	createTitle(year,month);
	varweekdays=document.getElementById("weekdays");
	for(vari=0;i<7;i++){
		varx=document.createElement("LI");
		vart=document.createTextNode(weekName[i]);
		x.appendChild(t);
		weekdays.appendChild(x);
	}
	delDay();
	createDay();
	isnow();
}
functionchange(x){
	aimmonth+=x;
	if(aimmonth==-1){
		aimyear-=1;
		aimmonth=11;
	}elseif(aimmonth==12){
		aimyear+=1;
		aimmonth=0;
	}
	createTitle(aimyear,aimmonth);
	delDay();
	createDay();
	isnow();
}
functioncreateTitle(y,m){
	document.getElementById("year").innerHTML=y;
	document.getElementById("month").innerHTML=monthName[m];
}
functioncreateDay(){
	vardatetmp=newDate();
	datetmp.setFullYear(aimyear,aimmonth,1);
	varfirstday=datetmp.getDay();
	vardays=document.getElementById("days");
	
	for(vari=0;i
总结


javascript目前算是起步，最最基础的皮毛学会了，起码不会的东西可以通过去找函数，查资料学习，可能实现的有些复杂，但是最终能够表达出自己的构想，听开心的。下一步，再写一些实例去看jquery。
css仍是不足，有些东西可能会有冲突，无法实现想要的东西，仍要回去学基础的东西，最重要的一点是多练，积累经验，总结规律和思想。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

基于javascript实现日历功能原理及代码实例

CSS日历

热门推荐

随机推荐