html日历页面节假日_js css+html实现简单的日历
web页面中很多地方都会用到日历显示,选择等,本文用html、css、javascript实现简单的日历。完成以后的效果与页面左侧的效果差不多,可以切换上个月、下个月。也可以根据实际情况进行扩展。
html
html部分比较简单,声明一个div,具体的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对象,可以获取到年月日时分秒以及时间戳等信息,具体参考: http://www.w3school.com.cn/jsref/jsref_obj_date.asp
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 div中渲染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 div中的html部分
renderHtml();
// 表格中显示日期
showCalendarData();
// 绑定事件
bindEvent();
/**
* 渲染html结构
*/
function renderHtml() {
var calendar = document.getElementById("calendar");
var titleBox = document.createElement("div"); // 标题盒子 设置上一月 下一月 标题
var bodyBox = document.createElement("div"); // 表格区 显示数据
// 设置标题盒子中的html
titleBox.className = 'calendar-title-box';
titleBox.innerHTML = "" +
"" +
"";
calendar.appendChild(titleBox); // 添加到calendar div中
// 设置表格区的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 div中
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'));
});
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html日历页面节假日_js css+html实现简单的日历相关推荐
- html日历页面节假日_html+css+js实现一个简易日历
0.效果预览 简易 只实现了日历最基础的功能,当前日期红色显示,可通过上方的左右按钮查看上一月或下一月的日期. 1.HTML部分 < > 日一二三四五六 2.CSS部分 #cldFrame ...
- html日历页面节假日_js+html制作简单日历的方法
这篇文章主要为大家详细介绍了js html制作简单日历的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 新手一枚,不会写什么高大上的博文,一些平时做的小练习,献丑 ...
- 用html制作简单日历,CCS小技巧,如何使用CSS Grid制作简单的日历,简单有趣
原标题:CCS小技巧,如何使用CSS Grid制作简单的日历,简单有趣 日历是人类文明的重要工具之一.然后可以记住许多重要事件,并从事件的确切日期追溯到真相. 在本文中,我们将学习如何利用CSS Gr ...
- html日历表样式写法,css+html实现简单的日历
这篇文章主要为大家详细介绍了由html.css.javascript结合实现的简单日历,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 web页面中很多地方都会用到日历显示,选择等,本文用html. ...
- 带图片的日历html,js css+html实现简单的日历
web页面中很多地方都会用到日历显示,选择等,本文用html.css.javascript实现简单的日历.完成以后的效果与页面左侧的效果差不多,可以切换上个月.下个月.也可以根据实际情况进行扩展. h ...
- php日历css样式,css+html实现简单的日历
这篇文章主要为大家详细介绍了由html.css.javascript结合实现的简单日历,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 web页面中很多地方都会用到日历显示,选择等,本文用html. ...
- HTML+CSS+JavaScript实现简单的日历效果
初学前端花了一下午写了一个简单的日历效果: 可以选择按月或者按年切换,当前日期会有绿色的背景显示, 所有的日期都会正确的对应星期几. 所有代码: <!DOCTYPE html&g ...
- java编写日历思路_使用JAVA写一个简单的日历
JAVA写一个简单的日历import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDat ...
- 电脑桌面日历云便签怎么通过日历查看节假日和农历节气?
一.打开Windows电脑桌面日历云便签,进入便签主界面: 二.点击主界面右上角的日历按钮,如开启了顶部简化模式,可在右上角的设置中找到"日历"功能并点击,打开便签日历页面: 三. ...
最新文章
- 关于maya与max互导FBX出现错误的解决方案。
- 报表控件NCreport教程:报表高级设计
- 【Linux入门连载二】Linux系统有哪些基本目录?
- python两数求和_Python两数相加实现
- KnockoutJs篇:快速掌握KnockoutJs
- cocos2dx热更新tmx的一个坑
- byteofpython中文gitbook_GitBook 简明教程
- loj10157. 「一本通 5.2 例 5」皇宫看守
- [转]Java杂谈(七)--接口amp; 组件、容器
- 起心动念成大愿,点亮心灯祝世界 “点亮心灯祝福世界”活动圆满收官
- Software Architecture Pattern(Mark Richards)笔记
- JQ对复选框全选、获取复选框的值、回选
- Java中在指定范围内生成整型、长整型、双精度随机数流
- vue设置div块隐藏与显示(v-show)
- mac安装sql server
- 视频教程-Android之ViewPager,Fragment知识全讲-Android
- 微信小程序设置页面标题
- 金融行业组织架构及岗位分布
- 兼容PD快充5V-12V高压给两节串联8.4V锂电池1A充电芯片电路图
- C语言学习笔记:内存的五大分区
热门文章
- GWAS研究和多基因评分
- 7种超轻量级的Linux发行版,希望能够帮助你找到适合自己的操作系统
- eclipse不自动弹出提示(alt+/快捷键失效)
- visual studio2017快捷键的定制和导出导入的技巧与按键失灵分享[玩eclipse的很容易上手]...
- 9 概率机器人 Probabilistic Robotics 二值贝叶斯滤波 占据栅格地图 occupancy grid mapping
- layui表格下拉框无法显示
- 矩阵的转置(C语言)
- Mysql数据库主主从设置
- 11.ARM架构的异常与中断
- <RTL coding的艺术> non-constant expression引出的思考