<!DOCTYPE html>
<html>
<head>
<title>自己写的JS日历，适合学习</title>
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<body>
<div id="calendar">
<p id="title_time"></p>
<table width="100%" height="90%" align="center" style="text-align:center;"><tbody>
<tr><th><span class="pre_d" title="前一月"><<</span>&nbsp;日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六&nbsp;<span class="next_d" title="后一月">>></span></th></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</tbody></table>
<script type="text/javascript">
jQuery(document).ready(function($){
var myDate = new Date();
function timer(){
$("td").each(function(){
$(this).html("");
});
var year = myDate.getFullYear();//获取完整的年份(4位,1970-????)
var month = myDate.getMonth();//获取当前月份(0-11,0代表1月)
var date = myDate.getDate();//获取当前日(1-31)
var day = myDate.getDay();//获取当前星期X(0-6,0代表星期天)
var num = day-(date%7-1);//1号星期X
$("#title_time").html(year+"年"+(month+1)+"月");
var i=1;
var end;
switch(month){
case 0: end = 31;break;
case 1: if((year%4==0 && year%100!=0)||(year%400==0))end = 29;else end = 28;break;
case 2: end = 31;break;
case 3: end = 30;break;
case 4: end = 31;break;
case 5: end = 30;break;
case 6: end = 31;break;
case 7: end = 31;break;
case 8: end = 30;break;
case 9: end = 31;break;
case 10: end = 30;break;
case 11: end = 31;break;
}
$("tr").eq(i).find("td").eq(num).html(i);
var riqi = null; 
$("td").each(function(){
if($(this).parent().index()==1){
if($(this).prev("td").html())
$(this).html(++i);
/*if(i==date)
$(this).css("background-color","red");*/
}
if($(this).parent().index()>1&&i<end){
$(this).html(++i);
}
});
}
timer();
$(".pre_d").click(function(){
var nian = myDate.getFullYear();
var yue = myDate.getMonth();
if(yue==0){
nian--;
yue=12;
}
var ri = "01";
var str = nian+" "+yue+" "+ri;
myDate = new Date(str);
timer();
});
$(".next_d").click(function(){
var nian = myDate.getFullYear();
var yue = myDate.getMonth();
yue+=2;
if(yue==13){
nian++;
yue=1;
}
var ri = "01";
var str = nian+" "+yue+" "+ri;
myDate = new Date(str);
timer();
});
});
</script>
/div>
</body>
</html>

js日历学习的更多相关文章

  1. js面向对象学习 - 对象概念及创建对象

    原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...

  2. js数组学习整理

    原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...

  3. js入门学习~ 运动应用小例

    要实现的效果如下: 鼠标移入各个小方块,实现对应的效果(变宽,变高,移入透明,移出恢复)~~ (且各运动相互之前不干扰)  主要是练习多个物体的运动框架~~ --------------------- ...

  4. JS入门学习，写一个时钟~

    <!-- 耽搁了几天,于是又继续回到JS的学习了~~ 各种头大,加油吧... --> <!doctype html><html><head> <t ...

  5. 【干货分享】Node.js 中文学习资料和教程导航

    这篇文章来自 Github 上的一位开发者收集整理的 Node.js 中文学习资料和教程导航.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念,它的目标是帮助程 ...

  6. js再学习笔记

    #js再学习笔记 ##基本 1.js严格区分大小写   2.js末尾的分号可加,也可不加   3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var ...

  7. 简洁JS 日历控件 支持日期和月份选择

    原文出处 以下这个JS日历控件是我的闲暇之余自己编写的,所有的代码全部在IE7/IE8/Firefox下面测试通过, 而且可以解决被iframe层遮盖的问题.现在只提供两种风格(简洁版和古典版)和两种 ...

  8. JS数组学习笔记

    原文:JS数组学习笔记 最近在备课数组,发现很多ES5的方法平时很少用到.细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助. 概念 数组是值的有序集合.每个 ...

  9. js 正则学习小记之匹配字符串

    原文:js 正则学习小记之匹配字符串 今天看了第5章几个例子,有点收获,记录下来当作回顾也当作分享. 关于匹配字符串问题,有很多种类型,今天讨论 js 代码里的字符串匹配.(因为我想学完之后写个语法高 ...

随机推荐

  1. 适配iOS7之—UITableView和UISearchBar

    iOS7中,如果用UITableViewStyleGrouped的话,里面的cell会比原来的拉长了,这样做应该是为了统一和UITableViewStylePlain风格时cell的大小一致,所以改用 ...

  2. iOS博客列表

    国外 iOSDevWeekly NSHipster NSBlog objcio Raywenderlich Bignerdranch NSScreencast 需FQ Pilky.me jeremyw ...

  3. MFC中 编辑框输入换行功能

    首先修改编辑框的属性: Multiline 设为true , Auto HScroll 设为true , Auto VScroll 设为 true . 然后响应PreTranslateMessage( ...

  4. SilverLight-Access:银光项目测试数据类列表

    ylbtech-SilverLight-Access:银光项目测试数据类列表 1.A, Product.cs 产品类 1.A, Product.cs 产品类返回顶部 1,/Access/Product ...

  5. 给java类加static修饰编译器会说什么？

    Illegal modifier for the class XXX;only public abstract & final are permitted.

  6. tomcat内存、连接数优化

    1.检測系统能够设置的内存大小 java -Xmx1024M -version(当中1024表示检測内存能否够调整到这个数) 2.设置tomcat内存 在tomcat_home/bin/catalin ...

  7. JAVA_Error initializing endpoint怎么办

    1 运行CMD,输入命令netstat –ano,找到这个TCP,后缀为8080的PID(我的是2660),然后打开任务管理器,在进程选项卡中打开PID查看   2 在右侧的进程窗口找到PID是左侧的 ...

  8. angular - 如何支持less和sass（scss）

    更新时间: (2018-7-26) - 使用angular6.x最新版本 新建项目时,我们指定类型: 示例:ng new projectname -style=sass(scss) 实例:ng new ...

  9. F - 概率（经典问题）

    Description Sometimes some mathematical results are hard to believe. One of the common problems is t ...

  10. 聚合数据Android SDK 12306火车票查询订票演示示例

    1.聚合SDK是聚合数据平台,为移动开发者提供的免费数据接口.使用前请先到聚合平台(http://www.juhe.cn/)注册,申请相关数据. 2.下载聚合数据SDK,将开发包里的juhe_sdk_ ...