<!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. HTTP协议header头域

    HTTP(HyperTextTransferProtocol)是超文本传输协议的缩写,它用于传送WWW方式的数据,关于HTTP协议的详细内 容请参考RFC2616.HTTP协议采用了请求/响应模型.客 ...

  2. 【windows】windows系统下，在任务管理器的进程选项卡中查看PID/任务管理器怎么查看PID

    PID,就是windows上的进程ID,是一个进程的唯一标识值. 那今天启动JDK跑起来一个项目之后,想要在任务管理器中查看这个JDK所在进程的PID但是看不到. 怎么解决? 1.我在任务管理器的服务 ...

  3. xamarin.ios 半圆角按钮Readerer

    xamarin.from上可以使用本身的button实现圆角带图标的按钮,但是没有半圆角的按钮实现,需要自己使用Renderer重新写过来重写一个button. 下面是一个重写的带边框的方式,代码如下 ...

  4. Dapper Sqlpara where in

    Mark一下:string sql = "SELECT * FROM SomeTable WHERE id IN @ids" var results = conn.Query(sq ...

  5. from: Maven实战（九）——打包的技巧

    from : http://www.infoq.com/cn/news/2011/06/xxb-maven-9-package 要点: 1. 打出可执行的jar包, 2. 自定义打包

  6. 15、Spring Boot使用Druid和监控配置【从零开始学Spring Boot】

    转载:http://blog.csdn.net/linxingliang/article/details/52001740目录(?)[-] 1添加Maven依赖 或jar包 2配置数据源相关信息 3 ...

  7. js 考记忆力得小游戏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. [Sqlite]--&gt;嵌入式数据库事务理解以及实例操作

    引子: 1. Sqlite在Windows.Linux 和 Mac OS X 上的安装过程 2,嵌入式数据库的安装.建库.建表.更新表结构以及数据导入导出等等具体过程记录 SQLite 事务(Tran ...

  9. 网络电台（WIZ550io）

    网络电台是用WIZ550io(内嵌MAC地址)和ATMEGA1284(Flash 128K,EEPROM4K)制作的.用户可注冊多达80个无线电广播. 无线电广播的注冊可在内嵌网页中进行. 网络电台的 ...

  10. mysql主从只同步部分库或表

    同步部分数据有两个思路,1.master只发送需要的:2.slave只接收想要的. master端: binlog-do-db      二进制日志记录的数据库(多数据库用逗号,隔开)binlog-i ...