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日 星期一
d1.getFullYear(); // 获取年信息, 2016
d1.getMonth(); // 获取月信息(从0开始 范围:0-11) 3
d1.getDate(); // 获取天信息 此处结果:25
d1.getDay(); // 获取星期信息 (0-6) 此处结果: 1
也可以在初始化的时候直接设置年月日信息# 设置 2016年3月15日
var d2 = new Date(2016, 2, 15); // 月是从0开始计数, 需要减一
d2.getFullYear(); // 2016
d2.getMonth(); // 2
d2.getDate(); // 15
d2.toLocaleDateString(); // "2016/3/15" 证明设置正确
日历中会涉及到每个月多少天之类的问题,在js中很简单,如果设置年月日的时候,超出当月,js会自动算成下个月的,例如4月只有30天,如果设置成31 日,获得的Date类型中自动会算成5月1日;如果设置成5月0日,js会处理成4月30日,那么5月-1日也就是4月29日var d3 = new Date(2016, 3, 30);
d3.toLocaleDateString(); // "2016/4/30"
var d4 = new Date(2016, 3, 31);
d4.toLocaleDateString(); // "2016/5/1"
var d5 = new Date(2016, 3, 33);
d5.toLocaleDateString(); // "2016/5/3"
var d6 = new Date(2016, 4, 1);
d6.toLocaleDateString(); // "2016/5/1"
var d7 = new Date(2016, 4, 0);
d7.toLocaleDateString(); // "2016/4/30"
var d8 = new Date(2016, 4, -3);
d8.toLocaleDateString(); // "2016/4/27"
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 = document.getElementById("calendar");
var titleBox = document.createElement("p"); // 标题盒子 设置上一月 下一月 标题
var bodyBox = document.createElement("p"); // 表格区 显示数据
// 设置标题盒子中的html
titleBox.className = 'calendar-title-box';
titleBox.innerHTML = "" +
"" +
"";
calendar.appendChild(titleBox); // 添加到calendar p中
// 设置表格区的html结构
bodyBox.className = 'calendar-body-box';
var _headHtml = "
" +
"
日" +
"
一" +
"
二" +
"
三" +
"
四" +
"
五" +
"
六" +
"
";
var _bodyHtml = "";
// 一个月最多31天,所以一个月最多占6行表格
for(var i = 0; i < 6; i++) {
_bodyHtml += "
" +
"
" +
"
" +
"
" +
"
" +
"
" +
"
" +
"
" +
"
";
}
bodyBox.innerHTML = "
_headHtml + _bodyHtml +
"
";
// 添加到calendar p中
calendar.appendChild(bodyBox);
}
/**
* 表格中显示数据,并设置类名
*/
function showCalendarData() {
var _year = dateObj.getDate().getFullYear();
var _month = dateObj.getDate().getMonth() + 1;
var _dateStr = getDateStr(dateObj.getDate());
// 设置顶部标题栏中的 年、月信息
var calendarTitle = document.getElementById("calendarTitle");
var titleStr = _dateStr.substr(0, 4) + "年" + _dateStr.substr(4,2) + "月";
calendarTitle.innerText = titleStr;
// 设置表格中的日期数据
var _table = document.getElementById("calendarTable");
var _tds = _table.getElementsByTagName("td");
var _firstDay = new Date(_year, _month - 1, 1); // 当前月第一天
for(var i = 0; i < _tds.length; i++) {
var _thisDay = new Date(_year, _month - 1, i + 1 - _firstDay.getDay());
var _thisDayStr = getDateStr(_thisDay);
_tds[i].innerText = _thisDay.getDate();
//_tds[i].data = _thisDayStr;
_tds[i].setAttribute('data', _thisDayStr);
if(_thisDayStr == getDateStr(new Date())) { // 当前天
_tds[i].className = 'currentDay';
}else if(_thisDayStr.substr(0, 6) == getDateStr(_firstDay).substr(0, 6)) {
_tds[i].className = 'currentMonth'; // 当前月
}else { // 其他月
_tds[i].className = 'otherMonth';
}
}
}
/**
* 绑定上个月下个月事件
*/
function bindEvent() {
var prevMonth = document.getElementById("prevMonth");
var nextMonth = document.getElementById("nextMonth");
addEvent(prevMonth, 'click', toPrevMonth);
addEvent(nextMonth, 'click', toNextMonth);
}
/**
* 绑定事件
*/
function addEvent(dom, eType, func) {
if(dom.addEventListener) { // DOM 2.0
dom.addEventListener(eType, function(e){
func(e);
});
} else if(dom.attachEvent){ // IE5+
dom.attachEvent('on' + eType, function(e){
func(e);
});
} else { // DOM 0
dom['on' + eType] = function(e) {
func(e);
}
}
}
/**
* 点击上个月图标触发
*/
function toPrevMonth() {
var date = dateObj.getDate();
dateObj.setDate(new Date(date.getFullYear(), date.getMonth() - 1, 1));
showCalendarData();
}
/**
* 点击下个月图标触发
*/
function toNextMonth() {
var date = dateObj.getDate();
dateObj.setDate(new Date(date.getFullYear(), date.getMonth() + 1, 1));
showCalendarData();
}
/**
* 日期转化为字符串, 4位年+2位月+2位日
*/
function getDateStr(date) {
var _year = date.getFullYear();
var _month = date.getMonth() + 1; // 月从0开始计数
var _d = date.getDate();
_month = (_month > 9) ? ("" + _month) : ("0" + _month);
_d = (_d > 9) ? ("" + _d) : ("0" + _d);
return _year + _month + _d;
}
})();
本例中并没有添加点击表格中日期时候的事件,可以在bindEvent函数中添加如下代码获取所点击日期的信息var table = document.getElementById("calendarTable");
var tds = table.getElementsByTagName('td');
for(var i = 0; i < tds.length; i++) {
addEvent(tds[i], 'click', function(e){
console.log(e.target.getAttribute('data'));
});
}
关于用css+html+javascript实现简单日历的代码就分享到这里了,希望以上内容可以对大家有一定的参考价值,可以学以致用。如果喜欢本篇文章,不妨把它分享出去让更多的人看到。
html中显示日历的代码,用css+html+javascript实现简单日历的代码相关推荐
- js html css淘宝足迹日历效果,JavaScript实现简单日历效果
本文实例为大家分享了JavaScript实现简单日历效果的具体代码,供大家参考,具体内容如下 实现效果: 根据所选择的年月,列出当月对应是周几,效果图如下: 实现思路: 1.使用select标签保存年 ...
- c语言图形学画扇形代码,利用CSS绘制任意角度的扇形示例代码
前言 扇形制作原理,底部一个纯色原形,里面2个相同颜色的半圆,可以是白色,内部半圆按一定角度变化,就可以产生出扇形效果 效果图 示例代码: 扇形绘制 } .sx1{ position: absolut ...
- 如何使用CSS和JavaScript构建简单的甘特图
到目前为止,在我们CSS图表系列教程中,我们已经学习了如何创建不同类型的图表,包括条形图,温度计图和饼图. 今天,我们将通过在甘特图中构建和呈现数据来继续这一旅程. 与其他图表教程不同,我们将大量使用 ...
- js php滚动图代码,JavaScript_JS实现的N多简单无缝滚动代码(包含图文效果),本文实例讲述了JS实现的N多简 - phpStudy...
JS实现的N多简单无缝滚动代码(包含图文效果) 本文实例讲述了JS实现的N多简单无缝滚动代码.分享给大家供大家参考,具体如下: 实现原理很简单,注册事件之后,立即将元素的innerHTML累加一次. ...
- js装修计算器java代码_用js编写的简单的计算器代码程序
最近编写的一个简单的计算器代码程序,先给大家展示一下 分享代码如下 #box{width: 295px; margin: 0 auto; text-align: justify; border: 1p ...
- css中显示隐藏div层,JS CSS 显示隐藏DIV 层
匿名用户 1级 2011-01-12 回答 调整了下标签的位置 一般js要放在css后面 最好js放在dom最后,等待dom解释完毕再执行js代码 无标题文档 #div1{ border:1px #0 ...
- 日历html代码 脚本之家,基于javascript编写简单日历
一.表格行数问题 既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列.要解决行数问题之前,还得先知道这个月的第1天是星期几,因 ...
- html日历页面节假日_html+css+js实现一个简易日历
0.效果预览 简易 只实现了日历最基础的功能,当前日期红色显示,可通过上方的左右按钮查看上一月或下一月的日期. 1.HTML部分 < > 日一二三四五六 2.CSS部分 #cldFrame ...
- html移动端隐藏代码,html Css PC 移动端 公用部分样式代码整理
css常用公用部分样式代码整理: body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li ...
- footer代码html,css如何实现footer定位(完整代码)
本篇文章给大家带来的内容是关于css如何实现footer定位(完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. css实现footer定位 Document html,bod ...
最新文章
- QThread: Destroyed while thread is still running
- java实体类设计_java实验1 实体类的设计-答案
- linux qt 系统时间,QT在linux环境下读取和设置系统时间
- python3速查参考- python基础 3 - - while循环实例 + Continue break的应用 + 列表的初步学习...
- 容器的六大误区和八大正确场景(颠覆你的认知)
- 自己学Docker:4.開始了解Docker的工作模式
- Hive采集数据框架flume
- 使用 Visual Studio 发布 .NET 控制台应用程序
- 回顾史上25款经典芯片:曾震撼了世界
- 每天30分钟学python-每天 3 分钟,小闫带你学 Python(二十三)
- 12v工业计算机主机,ARM一体机 工业电脑,低功耗主机 AM3352
- 一次WTS-WAF绕过
- 国内下载国外数据集(库)方案整理
- 反斜杠,让您的csv文档字符不撞车;让“借”您csv数据的人叫苦不迭。
- 机器人3D模型可视化建模线上三维虚拟现实展示
- CSS文本溢出用...显示
- 内网穿透 NPS工具实现内网穿透
- 力科示波器 matlab,力科示波器手册.pdf
- 百度app红包? 百度全家桶?果断卸载
- [转]22 个精美的网站管理后台模板推荐
热门文章
- 智头条:智能家居出货量将超5亿台;美的发布智能家居操作系统;萤石DL31FS人脸锁AI卓越版发布;小米发布人脸识别智能门锁
- 软件质量管理-复习总结
- m3 pcb开孔 螺丝_螺丝过孔及工艺孔尺寸参照表
- matlab怎么计算地震波反应谱,基于MATLAB的地震反应谱与傅里叶谱计算分析.pdf
- 计算机组成原理课程全套ppt,计算机组成原理课程复习指导.ppt
- 三十三.智能驾驶之多传感器融合技术: AVOD融合方法
- 精通Linux Unix Shell编程电子书免费分享
- iOS 开发经验 - 转载
- 《图论及其应用》学习笔记(树)
- 软件工程导论作业2.4