html中显⽰⽇历的代码,⽤css+html+javascript实现简单⽇历的
代码
⽤css+html+javascript实现简单⽇历的代码
发布时间：2020-05-09 11:19:20
来源：亿速云
阅读：372
作者：⼩新
这篇⽂章主要为⼤家详细介绍了⽤css+html实现简单⽇历的代码，⽂中⽰例代码介绍的⾮常详细，具有⼀定的参考价值，感兴趣的⼩伙伴们可以参考⼀下。
web页⾯中很多地⽅都会⽤到⽇历显⽰，选择等，本⽂⽤html、css、javascript实现简单的⽇历。完成以后的效果与页⾯左侧的效果差不多，可以切换上个⽉、下个⽉。也可以根据实际情况进⾏扩展。
html
html部分⽐较简单，声明⼀个p，具体的html⽤javascript⽣成。整体内容⼤概是这样的：
demo
css/* 整体设置 */
*{margin:0px;padding:0px;}
/**
* 设置⽇历的⼤⼩
*/
.calendar{
width: 240px;
height: 400px;
display: block;
}
/**
* 设置⽇历顶部盒⼦
*/
.calendar .calendar-title-box{
position: relative;
width: 100%;
height: 36px;
line-height: 36px;
text-align:center;
border-bottom: 1px solid #ddd;
}
/**
* 设置上个⽉的按钮图标
*/
.calendar .prev-month {
position: absolute;
top: 12px;
left: 0px;
display: inline-block;
width: 0px;
height: 0px;
border-left: 0px;
border-top: 6px solid transparent; border-right: 8px solid #999;
border-bottom: 6px solid transparent; cursor: pointer;
}
/**
* 设置下个⽉的按钮图标
*/
.calendar .next-month {
position: absolute;
top: 12px;
right: 0px;
display: inline-block;
width: 0px;
height: 0px;
border-right: 0px;
border-top: 6px solid transparent;
border-left: 8px solid #999;
border-bottom: 6px solid transparent;
cursor: pointer;
}
/* 设置⽇历表格样式 */
.calendar-table{
width: 100%;
border-collapse: collapse;
text-align:center;
}
/* 表格⾏⾼ */
.calendar-table tr{
height: 30px;
line-height: 30px;
}
/* 当前天 颜⾊特殊显⽰ */
.currentDay {
color: red;
}
/* 本⽉ ⽂字颜⾊ */
.currentMonth {
color: #999;
}
/
* 其他⽉颜⾊ */
.otherMonth{
color: #ede;
}
样式设置基本没什么课说的，⼀些简单的设置。⽐如特殊的是表⽰“上个⽉”、“下个⽉”的图标，采⽤的绝对定位、利⽤css中的border 属性设置样式。
javascript Date对象 开始正式的js代码之前，需要先了解js中的Date对象，通过Date对象，可以获取到年⽉⽇时分秒以及时间戳等信
息,var d1 = new Date(); // 获取当前系统时间 我现在的时间是 2016年4⽉25⽇ 星期⼀
也可以在初始化的时候直接设置年⽉⽇信息# 设置 2016年3⽉15⽇
var d2 = new Date(2016, 2, 15); // ⽉是从0开始计数， 需要减⼀
⽇历中会涉及到每个⽉多少天之类的问题，在js中很简单，如果设置年⽉⽇的时候，超出当⽉，js会⾃动算成下个⽉的，例如4⽉只有30天，如果设置成31 ⽇，获得的Date类型中⾃动会算成5⽉1⽇；如果设置成5⽉0⽇，js会处理成4⽉30⽇，那么5⽉-1⽇也就是4⽉29⽇var d3 = new Date(2016, 3, 30);
var d4 = new Date(2016, 3, 31);
var d5 = new Date(2016, 3, 33);
html document是什么var d6 = new Date(2016, 4, 1);
var d7 = new Date(2016, 4, 0);
var d8 = new Date(2016, 4, -3);
javascript了解了js中Date对象的基本⽤法，接下来就是代码实现部分了，整体思路是这样的：定义⼀个全局的dateObj变量，⽤来记录表格中需要显⽰的 年⽉信息。 标题中的内容根据dateObj中取，表格中的⽇期则中dateObj中取到年⽉对应的1号的所有信息，即可确定1号在表格第⼀⾏的位置，以此倒推
上个⽉ 最后⼏天的数据、正推本⽉和下个⽉的数据。
具体步骤：
1.声明dateObj变量，并赋初值为当前系统时间
2.给calendar p中渲染html元素
3.通过dateObj获取当⽉1号的信息，并以此遍历出表格中所有⽇期
4.给上⼀⽉、下⼀⽉图标绑定事件(function(){
/*
* ⽤于记录⽇期，显⽰的时候，根据dateObj中的⽇期的年⽉显⽰
*/
var dateObj = (function(){
var _date = new Date(); // 默认为当前系统时间
return {
getDate : function(){
return _date;
},
setDate : function(date) {
_date = date;
}
};
})();
// 设置calendar p中的html部分
renderHtml();
/
/ 表格中显⽰⽇期
showCalendarData();
// 绑定事件
bindEvent();
/**
* 渲染html结构
*/
function renderHtml() {
var calendar = ElementById("calendar");
var titleBox = ateElement("p"); // 标题盒⼦ 设置上⼀⽉ 下⼀⽉ 标题var bodyBox = ateElement("p"); // 表格区 显⽰数据
// 设置标题盒⼦中的html
titleBox.className = 'calendar-title-box';
titleBox.innerHTML = "" +
"" +
"";
calendar.appendChild(titleBox); // 添加到calendar p中
// 设置表格区的html结构
bodyBox.className = 'calendar-body-box';
var _headHtml = "
" +
"
⽇" +
"
⼀" +

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。