php日历css样式,css+html实现简单的日历
这篇文章主要为大家详细介绍了由html、css、javascript结合实现的简单日历,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
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'));
});
}
相关推荐:
php日历css样式,css+html实现简单的日历相关推荐
- java样式是什么_java css样式 css样式的种类 选择器 文本相关样式 背景相关样式 边框 盒子模式...
今日内容: ? CSS样式 ? CSS样式的种类 ? 选择器 ? 文本相关样式 ? 背景相关样式 ? 边框 ? 盒子模式 select标签 下拉列表标签,常用于单选和多选,是一个组合标签,需要和子标签 ...
- html 点击增加样式,js点击添加css样式 css添加jq点击事件 JavaScript点击增加css样式...
js可实现点击后对div或者其他标签增加或者删除css样式,从而达到实现点击触发某种效果的目的.页面样式可以通过style修饰,也可以通过css修饰,改变css或者添加css可以改变页面的排版.代码如 ...
- 在html语言描述中,css的特点有,css样式 css样式语言特点
层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修 ...
- html表格居中设置css样式,css怎么设置table居中?
一般情况下,页面中可以利用align进行页面的居中.靠左或者靠右对齐,但是采用CSS样式表来做更简单一些,下面我们来看一下使用css设置table居中的方法. css设置居中的方法: 1.利用marg ...
- 表格内容居中css样式,css表格中的内容如何居中?css表格中的文本样式介绍
你知道css表格的内容太是如何居中的吗?你知道css表格的文本如何设计左对齐吗?你知道css表格如何设置右对齐吗?这些内容都在这篇文章之中等着你来学习了. 首先我们先介绍css表格中的内容是如何居中的 ...
- html中初始化css样式,css样式初始化 normalize
总于找到一款良心的css初始化样式重置,哈哈 在没上google之前,在百度搜一些腾讯,阿里等初始化样式,效果一般般,勉强用, 网上也有很多类似不过大部分都是去除浏览器所有样式 而normalize. ...
- Vue——在vue中,动态js改变css样式 (css 层叠模式)
vue文件 <el-table ref="myTable"> </el-table> <button @click="click" ...
- 用java写一个日历_使用JAVA写一个简单的日历
JAVA写一个简单的日历 import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDa ...
- php 去掉css样式,css虚线样式怎么去掉
当超链接变为活动状态或获得焦点时,链接周围会出现一条虚线,以区别于其他链接,这是超链接的默认行为.它基本上是虚线轮廓,不会像边框那样影响周围的元素.想要去掉css虚线样式,我们可以使用CSS属性&qu ...
最新文章
- 团队作业(四):描述设计
- 数学专业学计算机哪一行,计算数学
- 守住你自己的“沉香”
- shell里写个简单循环
- Hero In Maze
- Win系统 - 笔记本电脑之耳机插入没声音
- ZYF loves binary(dp)
- linux 下不错的html编辑器bluefish
- linux中硬链接为什么不能跨分区
- 职场上做“独狼”注定失败
- android 实现微信朋友圈文字收起与全文显示功能
- Grafana任意文件读取
- KVM虚拟机绑定物理CPU进行性能调优
- 白鹭引擎的微信分享接口
- 用ping查看邮件服务器的ip,发送邮件直接访问服务器ip_邮件工具教程
- jeremy的路径规划学习:蚁群算法
- arguments的相关用法【案例】
- linux启动redis报错Failed to start Redis persistent key-value database
- linux的gromacs模拟分子运动,GROMACS分子动力学模拟技术与应用
- CAXA2020复制粘贴时卡顿或卡死
热门文章
- java基于Springboot+vue的文体文具销售商城网站 elementui
- c++调用c的问题处理
- ListView实现类似多米的条目下拉功能
- 相见恨晚的 Git 命令动画演示,一看就懂!
- php微信随机现金红包,php 微信现金红包 errorCode:60
- Jenkins基础:使用NPM构建前端应用6:部署前端镜像
- 怎么用计算机属性打开文件,电脑桌面上的文件打开的时候都是显示属性没法打开 了解原因所在...
- 智能硬件狂热背后的冷思考:有多少伪刚需?
- 西油大一大二在南充磨练意志,去成都后变得坚强自信,毕业后西油学生就很好找工作...
- 微信小程序--6位密码输入自动提交