<!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. #译# Core Data概述 (转)

    昨晚熬夜看发布会(本以为屌丝终于能买得起苹果了,谁知道...),因为看不了视频直播,所以就正好有空就把www.objc.io最新的一篇文章翻译了一下,同时感谢CocoaChina翻译组提供校对,以下为 ...

  2. C# 中的结构类型（struct type）

    ylbtech- .NET-Basic:C# 中的结构类型(struct type) C# 中的结构类型(struct type) 1.A,相关概念返回顶部   像类一样,结构(struct)是能够包 ...

  3. 微信小程序 - 单个题目

    后端传过来的数据,如果通过wx:for遍历出来那就是一个页面全部排下来.... 我的想法就是,页面初始化时设置一个默认值 1/50 就是 index+1 / 50(后端传过来的数组长度),通过控制in ...

  4. css样式控制元素固定在底部

    回复固定在底部:css样式用到了 box-sizing属性 box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webk ...

  5. Python数据结构：列表、元组和字典

    在Python中有三种内建的数据结构——列表list.元组tuple和字典dict 列表中的项目包括在方括号中,项目之间用逗号分割 元组和列表十分类似,只不过元组和字符串一样是不可变的 即你不能修改元 ...

  6. Robot Framework使用Phantomjs进行无界面UI自动化测试

    Robot Framework 是一款关键字驱动的验收自动化测试框架,现在在国内使用的越来越广泛了.一种通用的Web UI自动化测试解决方案是Robot Framework+Selenium2Libr ...

  7. curl库pycurl实例及参数详解

    pycurl是功能强大的python的url库,是用c语言写的,速度很快,比urllib和httplib都快. 今天我们来看一下pycurl的用法及参数详解 常用方法: pycurl.Curl() # ...

  8. Theme.AppCompat.Light.DarkActionBar ActionBarActivity

    关于android-support-v7-appcompat.jar的引用.这个不单纯的把jar复制到项目lib目录下的,不然就会报一堆主题找不到的2b问题, 正确方法例如以下: 1.找到androi ...

  9. python tkinter module的用法

    tkinter windows下从python3.2版本之后是自动安装的. python3.3之后的引入方式: >>> import _tkinter>>> imp ...

  10. Iconfot阿里妈妈-css高级应用

    矢量图标替换教程 首先进入:http://www.iconfont.cn/ 搜索你分类的关键字---然后加入购物车 加入购物车之后,下载到本地用浏览器打开demo.html 把a class=“原来样 ...