基于javascript实现日历功能原理及代码实例
程序员文章站
2022-06-17 22:10:32
日历在学习javascript过程中，菜鸟教程有一个javascript实例---css日历，感觉挺有趣的，在它的基础上增加了一些简单的功能（差点哭辽）。功能 按照传统日历方式显示该月的每一天。...
日历
在学习javascript过程中，菜鸟教程有一个javascript实例---css日历，感觉挺有趣的，在它的基础上增加了一些简单的功能（差点哭辽）。
功能
- 按照传统日历方式显示该月的每一天。
- 可以突出显示今天的日期
- 可以翻阅上一个月和下一个月的日历
实现
- step1 传统日历布局样式：分别将年份与月份、星期、该月的全部天数采用列表布局，排列组成传统日历的样式。
- step2 初始化和更新月份：先将列表清空（debug过程中，有一个发现，初始化的列表便存在的一个childnodes，该项目中需要清空），然后再填入前导空白（为了和星期能够对应），再填入具体某一个月的天数。
- step3 通过document获取列表对象，改变今天对应行的样式（classname变化）来突出显示。
- 其他细节在代码中实现
代码
html代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>css日历</title> <link type="text/css" rel="stylesheet" href="style.css" rel="external nofollow" > </head> <body> <h1>css日历</h1> <div class="month"> <ul> <li class="prev" onclick="change(-1)">❮</li> <li class="next" onclick="change(1)">❯</li> <li style="text-align: center"><span id="month">august</span><br> <span style="font-size: 18px" id="year">2016</span></li> </ul> </div> <ul class="weekdays" id="weekdays"> </ul> <ul class="days" id="days"> </ul> </body> <script type="text/javascript" src="show.js"></script> </html>
css代码
@charset "utf-8";
* {box-sizing:border-box;}
ul {list-style-type: none;}
body {font-family: verdana,sans-serif;}
.center {
text-align: center;
border: 3px solid green;
}
.month {
padding: 70px 25px;
width: 100%;
background: #1abc9c;
}
.month ul {
margin: 0;
padding: 0;
}
.month ul li {
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: 10px 0;
background-color: #ddd;
}
.weekdays li {
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
}
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
}
.days li active {
padding: 5px;
background: #1abc9c;
color: white !important;
}
/* add media queries for smaller screens */
@media screen and (max-width:720px) {
.weekdays li, .days li {width: 13.1%;}
}
@media screen and (max-width: 420px) {
.weekdays li, .days li {width: 12.5%;}
.days li .active {padding: 2px;}
}
@media screen and (max-width: 290px) {
.weekdays li, .days li {width: 12.2%;}
}
javascript代码
var date = new date();
var year = date.getfullyear();
var month=date.getmonth();
var day = date.getdate();
var week=date.getday();
var p=(week-day+1+35)%7+day-1;
var monthname=[
"january","february","march","april","may","june","july","august","september","october","november","december"
];
var monthnum=[
31,28,31,30,31,30,31,31,30,31,30,31
];
var weekname=[
"su","mo","tu","we","th","fr","sa"
];
var aimmonth=month,aimyear=year;
function init(){
createtitle(year,month);
var weekdays=document.getelementbyid("weekdays");
for(var i=0;i<7;i++){
var x = document.createelement("li");
var t = document.createtextnode(weekname[i]);
x.appendchild(t);
weekdays.appendchild(x);
}
delday();
createday();
isnow();
}
function change(x){
aimmonth+=x;
if(aimmonth==-1){
aimyear-=1;
aimmonth=11;
}else if(aimmonth==12){
aimyear+=1;
aimmonth=0;
}
createtitle(aimyear,aimmonth);
delday();
createday();
isnow();
}
function createtitle(y,m){
document.getelementbyid("year").innerhtml=y;
document.getelementbyid("month").innerhtml=monthname[m];
}
function createday(){
var datetmp=new date();
datetmp.setfullyear(aimyear,aimmonth,1);
var firstday=datetmp.getday();
var days=document.getelementbyid("days");
for(var i=0;i<firstday;i++){
var x = document.createelement("li");
var t = document.createtextnode("");
x.appendchild(t);
days.appendchild(x);
}
for(var i=1;i<=getmonthday();i++){
var x = document.createelement("li");
var t = document.createtextnode(i);
x.appendchild(t);
days.appendchild(x);
}
}
function delday(){
var list=document.getelementbyid("days");
var len=list.childnodes.length;
for(var i=0;i<len;i++){
list.removechild(list.childnodes[0]);
}
}
function isnow(){
if(aimyear==year&&aimmonth==month){
days.childnodes[p].style="padding: 5px;background: #1abc9c;color: white !important;"
}
}
function getmonthday(){
if(aimmonth!=2){
return monthnum[aimmonth];
}else{
if(aimyear%4!=0||aimyear%100==0&&aimyear%400!=0){
return monthnum[aimmonth];
}
else return 29;
}
}
//main
init();
总结
javascript目前算是起步，最最基础的皮毛学会了，起码不会的东西可以通过去找函数，查资料学习，可能实现的有些复杂，但是最终能够表达出自己的构想，听开心的。下一步，再写一些实例去看jquery。
css仍是不足，有些东西可能会有冲突，无法实现想要的东西，仍要回去学基础的东西，最重要的一点是多练，积累经验，总结规律和思想。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。