[菜鸟自学二]简易日历

GoodNess2010 2010-01-12 09:07:12
第一篇写的是日期联动下拉.主要也就是时间类的基本操作.见下面链接
http://topic.csdn.net/u/20091215/11/3e361cb7-6437-456c-b9ea-b1122401f9ff.html

顺便也就写了这个简易日历.由于开始出发点不一样.导致这个小日历的HTML结构不是很合理,不清晰.
但也算达到了实践的目的.大伙可以多提意见. 谢谢大家.

代码如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title> Calendar </title>

  <style>

  	.tbody { border-collapse: collapse; border-color: #78B3ED; background-color: #fff; }

  	#Calendar { width: 212px; height: 150px;}

	#CContainer a{ display: block;width: 30px;height: 30px;text-decoration: none; }

	#CContainer a:hover { background-color: #B1EAF3;cursor: pointer; }

	#LHeader { height: 21px;font-family: "宋体";font-size: 12px; }

	.la { background-image:url(iconleft1.jpg);display:block;height: 20px;width: 21px; }	

	.ra { background-image:url(iconright1.jpg);display:block;height: 20px;width: 21px; }

	.now { color: #990000; }

	.normal { color: #999; }	

	#LDay td { font-family:"宋体";font-size: 12px;height: 30px;width: 30px;text-align: center; }	

	#LBody td { width: 30px;height: 30px;text-align: center;color: #999;font-family:"宋体";font-size: 12px;font-weight: bold; }	

	#showInfo { width: 212px;height: 30px;font-family:"宋体";font-size: 12px;font-weight: bold;text-align: left; }

  </style>

  <script type="text/javascript">

     /*!

     *  CalendarSimple

     *  http://www.cnblogs.com/goodness2010/

     *

     *  Copyright (c) 2009 GoodNess2010

     *  Date: 2009-1-12 (星期二)

     */

	var $ = function(id) { return document.getElementById(id); };

	var Calendar = function(cID) {

		this.calendar = $(cID);

		var D = new Date();

		this.year = D.getFullYear();

		this.month = D.getMonth() + 1;

		this.date = D.getDate();

		this.onEnd = function(){};

		this.init();

	};

	Calendar.prototype = {

		constructor: Calendar,

		init: function() {

			var _this = this;

			this.drawC( new Date(this.year, this.month, 0).getDate(), new Date(this.year, this.month - 1, 1).getDay(), new Date().getDate());

			$('prevM').onclick = function() { _this.prevM(); };

			$('nextM').onclick = function() { _this.nextM(); };

			$('prevY').onclick = function() { _this.prevY(); };

			$('nextY').onclick = function() { _this.nextY(); };

		},



		getDate: function() {

			return new Date(this.year, this.month, 0).getDate();

		},



		getDay: function() {

			return new Date(this.year, this.month - 1, 1).getDay();

		},



		drawC: function(max, start, now){

			var html = '', j = 0, d = new Date(), y = d.getFullYear(), m = d.getMonth() + 1;

			html += '<table id="LBody" width="212"><tbody><tr>';

			while(j++ < start) {

				html += '<td></td>';

			}

			for(var i = 0 ; i < max; i++) {

				if((i + 6 + j) % 7 == 0)  html += '<tr>';

				html += '<td><a onclick="changeDate(this);" class=' + ((y == this.year && m == this.month && (i + 1)  == now)  ? 'now' : 'normal') + ' href="#">' + (i + 1) + '</a></td>';

				if(!((i + j + 1) * 7) / 7) html += '</tr>';

			}

			html += '</tbody><table>';

			this.calendar.innerHTML = html;

			$('showDate').innerHTML = this.year + '.' + this.month;

			this.onEnd();

		},



		prevM: function() {

			this.month--;

			if(this.month < 1) { this.month = 12;this.year -= 1; }

			this.drawC(this.getDate(), this.getDay(), new Date().getDate());

		},



		nextM: function() {

			this.month++;

			if(this.month > 12) { this.month = 1;this.year += 1; }

			this.drawC(this.getDate(), this.getDay(), new Date().getDate());

		},



		prevY: function() {

			this.year--;

			this.drawC(this.getDate(), this.getDay(), new Date().getDate());

		},



		nextY: function() {

			this.year++;

			this.drawC(this.getDate(), this.getDay(), new Date().getDate());

		}

	}

	

  </script>

 </head>



 <body>

		<table id="Calendar" border="1" class="tbody">

			<tbody>

				<tr>

					<td width="142">

						<table id="LCalendar" class="tbody" width="212">

							<tr>

								<td height="21" bgcolor="#78b3ed" width="212">

									<table id="LHeader" height="21" width="212">

										<tbody>

											<tr align="center">

												<td align="center" width="21">

													<a href="#" class="la" id="prevM"></a>

												</td>

												<td align="center">

													<span id="showDate">2009.11</span>

												</td>

												<td align="center" width="21">

													<a href="#" class="ra" id="nextM"></a>

												</td>

											</tr>

										</tbody>

									</table>   

								 </td>                  	

							</tr>

							<tr>

								<td height="18">

								   <table id="LDay" bgcolor="#e7f1fd">

									  <tbody>

										  <tr>

											  <td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td>

										  </tr>

									  </tbody>

								  </table>                           	

								</td>

							</tr>

							 <tr>

								<td height="120" width="212" id="CContainer">                       	

								</td>

							</tr>                       

						</table>              

					</td>

				</tr>

			</tbody>

		</table>

			<input type="button" value="前一年" id="prevY"/>

			<input type="button" value="后一年" id="nextY"/>

	   <div id="showInfo"></div>

  <script type="text/javascript">

	var c = new Calendar('CContainer');

	c.onEnd = function() {

		$('showInfo').innerHTML = "您选择的日期为: " + this.year + '-' + this.month + '-' + this.date;

	}



	function changeDate(ohref) {

		$('showInfo').innerHTML = "您选择的日期为: " + c.year + '-' + c.month + '-' + ohref.innerHTML;

	}

  </script>

 </body>

</html>


[文字说明]
这只是一个日历的简版.主要就是基本的Date函数操作.

1.求本月第一天星期几
new Date(y, m, 1).getDay();

2.求该月共有多少天
new Date(y, m+1, 0).getDate()
主要思路就是先取得当月第一天是星期几.然后先把起始空白填满后,然后再正常循环表格生成表格日期.

[代码演示]
参见我的blog
http://www.cnblogs.com/goodness2010/archive/2010/01/11/1644324.html
...全文
390 29 打赏 收藏 转发到动态 举报
写回复
用AI写文章
29 条回复
切换为时间正序
请发表友善的回复…
发表回复
lilianplayer_163 2010-01-15
  • 打赏
  • 举报
 回复
记下
zhuzhupj 2010-01-15
  • 打赏
  • 举报
 回复
LZ是个厚道人
GoodNess2010 2010-01-15
  • 打赏
  • 举报
 回复
D
段传涛 2010-01-13
  • 打赏
  • 举报
 回复
代码好长啊。写日历 我都是在网上找源码。呵呵
帮你顶。
dandande 2010-01-13
  • 打赏
  • 举报
 回复
以前我写了个日历，是为小孩普及日历知识写的，不依赖date函数，推算出来的，只是另一个算法而已，
http://lixt127.512j.com/my2009/rili.php，代码见源文件
GoodNess2010 2010-01-13
  • 打赏
  • 举报
 回复
[Quote=引用 19 楼 ak47lhc 的回复:]
在 <head>后面加上
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
不然在ie7下会出错，文字是乱码，报js错
[/Quote]
谢谢.我的html文件编码为utf-8. 你的IE7应该默认编码不是UTF-8吧 你说的charset我加上了 谢谢你的提醒
coolper79 2010-01-13
  • 打赏
  • 举报
 回复
支持!
前端马内 2010-01-13
  • 打赏
  • 举报
 回复
在<head>后面加上
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
不然在ie7下会出错，文字是乱码，报js错
yan11cn 2010-01-13
  • 打赏
  • 举报
 回复
支持一下 呵呵
somboy 2010-01-13
  • 打赏
  • 举报
 回复
~O(∩_∩)O~
fpeih 2010-01-13
  • 打赏
  • 举报
 回复
我来学习下
GoodNess2010 2010-01-13
  • 打赏
  • 举报
 回复
D
GoodNess2010 2010-01-13
  • 打赏
  • 举报
 回复
[Quote=引用 23 楼 jason_dct 的回复:]
代码好长啊。写日历 我都是在网上找源码。呵呵
帮你顶。
[/Quote]
主要是封装废了一些代码. 其实实际效果代码 不过几行.
GoodNess2010 2010-01-13
  • 打赏
  • 举报
 回复
[Quote=引用 24 楼 qq373591361 的回复:]
月份呢？怎么没有月份啊？
[/Quote]
不太明白楼上的意思 日历头2010.1不就是月份么?
我这个只是日历的简版.离真正的日历还差很多.但原理基本都实现了.

谢谢大家的意见.
qq373591361 2010-01-13
  • 打赏
  • 举报
 回复
月份呢？怎么没有月份啊？
Click_Me 2010-01-12
  • 打赏
  • 举报
 回复
jf + 支持
GoodNess2010 2010-01-12
  • 打赏
  • 举报
 回复

谢谢大家支持
千游 2010-01-12
  • 打赏
  • 举报
 回复
不错，学习！@
sundotLei 2010-01-12
  • 打赏
  • 举报
 回复
up~~~ jf
feitian124 2010-01-12
  • 打赏
  • 举报
 回复
mark，勤写注释
加载更多回复（8）
（HDUACM201303版_15）筛选法及预处理（附菜鸟的23个经典错误）
杭电ACM课件2014版之（HDUACM201303版_15）筛选法及预处理（附菜鸟的23个经典错误）
html日历菜鸟,Calendar（日历）
Calendar(日历)使用$.fn.calendar.defaults重写默认值对象。日历控件显示一个月的日历，允许用户选择日期和移动到下一个或上一个月。默认情况下，一周的第一天是周日。它可以通过设置'firstDay'属性的值来更改设置。示例使用标签创建日历。使用Javascript创建日历。$('#cc').calendar({current:newDate()});属性属性名属性值类型描...
菜鸟自学之——SRA Toolkit 的下载和使用
菜鸟自学之——SRA Toolkit 的下载和使用 第一次写博客，必须mark一下：2018.07.27 sra toolkit是ncbi上将 .sra文件转换为 .fstaq.gz文件的工具。 1.下载/调用 SRA Toolkit 可以直接在linux里在线下载，要根据自己的系统选择合适的安装版本。我查看了一下主机的linux为redhat类型，没找到这个类型的版本，又去服务器看了...
JAVA菜鸟入门篇 - Calendar日历类和GregorianCalendar公历类 （二十八）
Calendar日历类和GregorianCalendar公历类  相应的API文档：Calendar类和GregorianCalendar类 人们对于时间的认识是：某年某月某日，这样的日期概念。计算机中时间是用long类型表示的。两者之间通过Calendar搭起桥梁。 Calendar类和GregorianCalendar类的关系： java.lang.O
菜鸟自学02：下载参考基因组及构建bowtie2索引
菜鸟自学02：构建bowtie2索引 对于生信小白我而言，摆在我面前的主要有两个问题：bowtie2是干嘛的软件？怎么构建bowtie2索引？ 问题1：bowtie2是干嘛的软件？ bowtie的本义是“领结”，一通搜索可以快速知道，bowtie在生信里是一个短序列比对工具，这样的工具还有fasta、blast、bowtie、shrimp、soap等。bowtie有其他类似工具所不具备的优点...
JavaScript

87,924

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章