本文详细解析如何使用JavaScript结合CSS实现一个动态日历组件。内容涵盖传统日历的列表布局方法、月份数据的动态生成与更新逻辑、以及通过DOM操作高亮当前日期的具体实现。文章提供了HTML结构、CSS样式及核心JS代码的完整示例，帮助开发者理解日期计算与界面渲染的原理。
日历功能概述
日历
在学习JavaScript的过程中，参考了菜鸟教程中的CSS日历实例，觉得该案例非常有趣。在此基础上，我添加了一些简单的交互功能（这个过程相当折腾）。
功能
- 按照传统日历的格式，显示指定月份的所有日期。
- 高亮显示当前的日期。
- 支持切换查看上一个月和下一个月。
核心实现步骤
实现
- 第一步，构建传统日历的布局样式：分别使用列表来展示年份与月份、星期标题以及该月的所有天数，通过排列组合形成传统日历的外观。
- 第二步，初始化并更新月份数据：首先清空列表（在调试过程中发现，初始化的列表中存在一个childNodes节点，项目中需要将其清空），然后填入前导空白格子（以确保日期与星期对齐），最后填入具体月份的天数。
- 第三步，通过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方面仍有不足，部分样式可能存在冲突，导致无法实现预期效果。仍需回归基础学习，最重要的是多进行练习，积累经验，总结规律和思想。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。