HTML 简单日历制作方法
新手一枚，不会写什么高大上的博文，一些平时做的小练习，献丑
<!doctype html>
<html> <head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
* {margin: 0;padding: 0}
#calendar {width: 210px;margin: 100px auto;overflow: hidden;border: 1px solid #000;padding: 20px;position: relative}
#calendar h4 {text-align: center;margin-bottom: 10px}
#calendar .a1 {position: absolute;top: 20px;left: 20px;}
#calendar .a2 {position: absolute;top: 20px;right: 20px;}
#calendar .week {height: 30px;line-height: 20px;border-bottom: 1px solid #000;margin-bottom: 10px}
#calendar .week li {float: left;width: 30px;height: 30px;text-align: center;list-style: none;}
#calendar .dateList {overflow: hidden;clear: both}
#calendar .dateList li {float: left;width: 30px;height: 30px;text-align: center;line-height: 30px;list-style: none;}
#calendar .dateList .ccc {color: #ccc;}
#calendar .dateList .red {background: #F90;color: #fff;}
#calendar .dateList .sun {color: #f00;}
</style>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function() { //必要的数据
//今天的年 月 日 ；本月的总天数；本月第一天是周几？？？
var iNow=0; function run(n) { var oDate = new Date(); //定义时间
oDate.setMonth(oDate.getMonth()+n);//设置月份
var year = oDate.getFullYear(); //年
var month = oDate.getMonth(); //月
var today = oDate.getDate(); //日 //计算本月有多少天
var allDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month]; //判断闰年
if(month == 1) {
if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
allDay = 29;
}
} //判断本月第一天是星期几
oDate.setDate(1); //时间调整到本月第一天
var week = oDate.getDay(); //读取本月第一天是星期几 //console.log(week);
$(".dateList").empty();//每次清空
//插入空白 for(var i = 0; i < week; i++) {
$(".dateList").append("<li></li>");
} //日期插入到dateList
for(var i = 1; i <= allDay; i++) {
$(".dateList").append("<li>" + i + "</li>")
}
//标记颜色=====================
$(".dateList li").each(function(i, elm){
//console.log(index,elm);
var val = $(this).text();
//console.log(val);
if (n==0) {
if(val<today){
$(this).addClass('ccc')
}else if(val==today){
$(this).addClass('red')
}else if(i%7==0 || i%7==6 ){
$(this).addClass('sun')
}
}else if(n<0){
$(this).addClass('ccc')
}else if(i%7==0 || i%7==6 ){
$(this).addClass('sun')
}
}); //定义标题日期
$("#calendar h4").text(year + "年" + (month + 1) + "月");
};
run(0); $(".a1").click(function(){
iNow--;
run(iNow);
}); $(".a2").click(function(){
iNow++;
run(iNow);
})
});
</script>
</head> <body>
<div id="calendar">
<h4>2013年10月</h4>
<a href="##" class="a1">上月</a>
<a href="##" class="a2">下月</a>
<ul class="week">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li> </ul>
<ul class="dateList"></ul>
</div> </body> </html>
HTML 简单日历制作方法的更多相关文章
- 简单介绍RPM包制作方法
RPM是RedHat Package Manager(RedHat软件包管理工具)的缩写,是一种用于互联网下载包的打包及安装工具,它包含在某些Linux分发版中.它生成具有.RPM扩展名的文件.使用r ...
- js编写当天简单日历
之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日 ...
- 《奥威Power-BI智能分析报告制作方法 》精彩回顾
上次课我们简单介绍了奥威Power-BI的智能分析报告,并展示了报告与图表相结合的应用场景.图文分析报表的意义不只在于美观,更重要的是固定框架下的灵活性和追根究底的动态分析,有着很强的实用性.上节课 ...
- 《奥威Power-BI智能分析报表制作方法》精彩回顾
年的最后一个月,一年又快过去.工作和学习都不能耽误,本周三奥威公开课又如约与大家见面咯!不知老师教的图文报表在课后你们都有练习吗?趁热打铁,我们现在再次来温习一下吧. 本期分享的内容:<奥威Po ...
- 11月30日《奥威Power-BI智能分析报表制作方法》腾讯课堂开课啦
这么快一周就过去了,奥威公开课又要与大家见面咯,上节课老师教的三种报表集成方法你们都掌握了吗?大家都知道,学习的结果在于实际应用,想要熟练掌握新内容的要点就在于去应用它.正是基于这一要点,每一期的课程 ...
- Xcode6.1标准Framework静态库制作方法。工程转Framework，静态库加xib和图片。完美解决方案。
http://www.cocoachina.com/bbs/read.php?tid-282490.html Xcode6.1标准Framework静态库制作方法.工程转Framework,静态库加x ...
- USB移动硬盘WinPE启动盘的制作方法
USB移动硬盘WinPE启动盘的制作方法 软件:老九WinPE 老毛桃终于撒手无论版 发行时间:2007年9月11日 制作发行:老毛桃 作用:当系统坏了,无法进入时,用来做系统维护,备份文件.轻巧稳定 ...
- RFID标签天线的三种制作方法
在RFID标签中,天线层是主要的功能层,其目标是传输最大的能量进出标签芯片.RFID天线是按照射频识别所要求的功能而设计的电子线路,将导电银浆或导电碳浆网印在PVC.PC或PET上,再与面层.保护层和 ...
- Webcast / 技术小视频制作方法——自己动手录制video轻松搞定
Webcast / 技术小视频制作方法——自己动手录制video轻松搞定 http://blog.sina.com.cn/s/blog_67d387490100wdnh.html 最近申请加入MSP的 ...
随机推荐
- (USB HID) In/Out Report 收發 Function
在紀錄 In/Out Report 收發之前先來看一下一個struct typedef struct _Device_cb { uint8_t (*Init) (void *pdev , uint8_ ...
- Windows 64位操作系统下安装和配置MySQL
一安装方式 MySQL安装文件分为两种,一种是MSI格式的,一种是ZIP格式的.下面来看看这两种方式: MSI格式的可以直接点击安装,按照它给出的安装提示进行安装,Windows操作系统下一般MySQ ...
- redis实现 msetex和 getdel命令
1.redis本身不提供 msetex命令(批量增加key并设置过期时间) class RedisExtend { private static final Logger logger = Logge ...
- redis的持久化相关操纵
一.redis数据持久化(数据保存在硬盘上) 1. 关系型数据库Mmysql持久化 任何增删改语句都是在硬盘上操作(安全) 断电,硬盘上数据还在 2.非关系型数据库 默认所有的增删改都是在内存中操作( ...
- Vue.js 使用注意事项
Vue.js 使用注意事项 1 过滤器主要用于简单的文本转换,如果要实现复杂的数据变换,应使用计算属性 指令的使用 v-bind基本用于HTML元素上的属性,如id.class.href.src等 v ...
- es第四篇：Query DSL
Query and filter context Match All Query 最简单的search请求,匹配所有文档,文档的_score值都是1,示例: get twitter/_search{ ...
- 【随笔】 Win7下安装Git
Git GGit是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.[2] Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源 ...
- 转 File "/usr/bin/yum", line 30 except KeyboardInterrupt, e:
因为yum包使用python2*等开发,修该为环境修改python3之后有问题, 解决: 修改文件/usr/bin/yum./usr/libexec/urlgrabber-ext-down头中相应py ...
- JavaScript call 和apply 的理解
这两个方法对于一些新手而言难耐弄清他们到底是怎么回事,对我我来讲我对call和apply的方法理解的也比较含糊.今天闲来无事准备彻底搞call和apply到底是怎么回事.本着互联网分享精神.我将我自己 ...
- Full postback triggered by LinkButton inside GridView inside UpdatePanel
GridView inside of a UpdatePanel,get the button to trigger a partial postback <asp:ScriptManager ...