<!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. Autolayout 03

    Debugging in Code 有两个调试layout问题的阶段. 1. Map from “this view is in the wrong place” to “this constrain ...

  2. zfighting 的问题

    1.对每个mesh 在脚本里加bias 由美术勾 {a. vertex shader b. depth bias slop depth bias rasterizateState} 2.inverse ...

  3. Incorrect column count: expected 1, actual 2

    List<Long> idList = queryForList("ass.pageQuery_sgIds", paramMap, Long.class); 报错:In ...

  4. 2016.8.22 Axure两级下拉框联动的实现

    刚学Axure,有些很简单的东西都要弄很久,但是弄出来的总归是很开心的. 参考来自:实现省市县下拉框的三级联动 http://www.woshipm.com/rp/348795.html/commen ...

  5. Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental……

    Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to th ...

  6. 检验 java 基础数据类型参数传递方式

    测试证明,java基础数据类型参数传递值虽是引用传递但是值不会改变.对象是引用传递,值会改变. 为什么?找到一段话来解释这个问题. "对于字符串对象来说,虽然在参数传递的时候也是引用传递,但 ...

  7. Java开启/关闭tomcat服务器

    © 版权声明:本文为博主原创文章,转载请注明出处 通过java代码实现Tomcat的开启与关闭 1.项目结构 2.CallTomcat.java package com.calltomcat.test ...

  8. 查看mysql 的存储过程定义

    查询数据库中的存储过程 方法一: select `name` from mysql.proc where db = 'your_db_name' and `type` = 'PROCEDURE' 方法 ...

  9. 请设计一个函数，用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路径。路径可以从矩阵中的任意一个格子开始，每一步可以在矩阵中向左，向右，向上，向下移动一个格子。如果一条路径经过了矩阵中的某一个格子，则该路径不能再进入该格子。 例如 a b c e s f c s a d e e 矩阵中包含一条字符串"bccced"的路径，但是矩阵中不包含"abcb"路径，因为字符串的第一个字符b占据了矩阵中

    // test20.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> #include< ...

  10. 如何利用hibernate3解决数据库丢失更新问题？

    首先我们要明白什么叫丢失更新. 比如数据库有一个person表,里面有一条这样的数据 "5 zhangsan shenzhen"; 现在有两个事务A.B同时查找了这一条记录: A事 ...