介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title> CSS日历& lt;/title>
& lt;链接类型=拔谋?css"rel=皊tylesheet"href=https://www.yisu.com/zixun/眘tyle.css " rel="外部nofollow”>
这篇文章主要讲解了javascript实现日历功能的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
<强>日历
在学习javascript过程中,菜鸟教程有一个javascript实例——但css日历,感觉挺有趣的,在它的基础上增加了一些简单的功能(差点哭辽)。
<强>功能
- <李>按照传统日历方式显示该月的每一天。 <李>可以突出显示今天的日期 <李>可以翻阅上一个月和下一个月的日历
李,
<强>实现
- <李> step1传统日历布局样式:分别将年份与月份,星期,该月的全部天数采用列表布的局,排列组成传统日历的样式。 <李>步骤2初始化和更新月份:先将列表清空(调试过程中,有一个发现,初始化的列表便存在的一个子节点的时候存在缺陷,该项目中需要清空),然后再填入前导空白(为了和星期能够对应),再填入具体某一个月的天数。 <李> step3通过文档获取列表对象,改变今天对应行的样式(类名变化)来突出显示。 <李>其他细节在代码中实现
李,
<强>代码
<强> html代码
CSS日历
-
<李类="上一页"> @charset“UTF-8";
* {box-sizing: border-box;}
ul {list-style-type:没有;}
身体{无衬线字体类型:Verdana;}
.center {
text-align:中心;
边界:3 px固体绿色;
}
.month {
填充:70 px 25 px;
宽度:100%;
背景:# 1 abc9c;
}
.month ul {
保证金:0;
填充:0;
}
李.month ul {
颜色:白色;
字体大小:20 px;
首字母:大写;
字母间距:3 px;
}
.month .prev {
浮:左;
padding-top: 10 px;
}
.month第二{
浮:正确;
padding-top: 10 px;
}
.weekdays {
保证金:0;
填充:10 px 0;
background - color: # ddd;
}
李.weekdays {
显示:inline-block;
宽度:13.6%;
颜色:# 666;
text-align:中心;
}
要擦防晒霜{
填充:10 px 0;
背景:# eee;
保证金:0;
}
李要擦防晒霜{
list-style-type:没有;
显示:inline-block;
宽度:13.6%;
text-align:中心;
margin-bottom: 5 px;
字体大小:12 px;
颜色:# 777;
}
李要擦防晒霜活跃{
填充:5 px;
背景:# 1 abc9c;
颜色:白色!重要;
}/*添加媒体查询屏幕更小*/@media屏幕和(max-width: 720 px) {
要擦防晒霜.weekdays li li{宽度:13.1%;}
}
@media屏幕和(max-width: 420 px) {
要擦防晒霜.weekdays li li{宽度:12.5%;}
李要擦防晒霜.active{填充:2 px;}
}
@media屏幕和(max-width: 290 px) {
要擦防晒霜.weekdays li li{宽度:12.2%;}
}
<>强javascript代码
var=new日期();
var年=date.getFullYear ();
var月=date.getMonth ();
var天=date.getDate ();
var=date.getDay一周();
var p=(工作日+ 1 + 35)% 7 +普通人;
var monthName=[
“January",“February",“March",“April",“May",“June",“July",“August",“September",“October",“November",“December"
];
var monthNum=[
31日31日31日,28日,30日,30日,31日,31日,30日,31日,30日,31日
];
var weekName=[
“Su",“Mo",“Tu",“我们;,“Th",“Fr",“Sa"
];
var aimmonth=月aimyear=一年;
init()函数{
createTitle(年、月);
var工作日=. getelementbyid (“weekdays");
我(var=0; i<7;我+ +){
var x=document.createElement (“LI");
var t=document.createTextNode (weekName[我]);
x.appendChild (t);
weekdays.appendChild (x);
}
delDay ();
createDay ();
现在();
}
函数变化(x) {
aimmonth +=x;
如果(aimmonth==1) {
aimyear -=1;
aimmonth=11;
}else if (aimmonth==12) {
aimyear +=1;
aimmonth=0;
}
createTitle (aimyear aimmonth);
delDay ();
createDay ();
现在();
}
函数createTitle (y、m) {
. getelementbyid (“year") .innerHTML=y;
. getelementbyid (“month") .innerHTML=monthName [m];
}
函数createDay () {
var datetmp=new日期();
datetmp.setFullYear (aimyear aimmonth 1);
var firstday=datetmp.getDay ();
var天=. getelementbyid (“days");
我(var=0; i< firstday;我+ +){
var x=document.createElement (“LI");
var t=document.createTextNode (“;”);
x.appendChild (t);
days.appendChild (x);
}
(var i=1; i<=getMonthDay();我+ +){
var x=document.createElement (“LI");
var t=document.createTextNode(我);
x.appendChild (t);
days.appendChild (x);
}
}
函数delDay () {
var列表=. getelementbyid (“days");
var len=list.childNodes.length;
(var i=0; i< len;我+ +){
list.removeChild (list.childNodes [0]);
}
}
函数是(){
如果(aimyear==year&, aimmonth==月){
days.childNodes [p]。
}
}
函数getMonthDay () {
如果(aimmonth !=2) {
返回monthNum [aimmonth];
其他}{
如果(aimyear % 4 !=0 | | aimyear % 100==0,, aimyear % 400 !=0) {
返回monthNum [aimmonth];
}
其他返回29;
}
}//主
init (); javascript实现日历功能的方法
