一个js写的日历(代码部分网摘)_时间日期

特意贴出这段代码,因为它的代码简洁和清晰,觉得不错,供大家分享。
×××××××函数定义部分

复制代码 代码如下:

<script type="text/javascript">
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
var Calendar = Class.create();
Calendar.prototype = {
initialize: function(container, options) {
this.Container = $(container);//容器(table结构)
this.Days = [];//日期对象列表
this.SetOptions(options);
this.Year = this.options.Year || new Date().getFullYear();
this.Month = this.options.Month || new Date().getMonth() + 1;
this.SelectDay = this.options.SelectDay ? new Date(this.options.SelectDay) : null;
this.onSelectDay = this.options.onSelectDay;
this.onToday = this.options.onToday;
this.onFinish = this.options.onFinish;
this.Draw();
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Year: 0,//显示年
Month: 0,//显示月
SelectDay: null,//选择日期
onSelectDay: function(){},//在选择日期触发
onToday: function(){},//在当天日期触发
onFinish: function(){}//日历画完后触发
};
Extend(this.options, options || {});
},
//当前月
NowMonth: function() {
this.PreDraw(new Date());
},
//上一月
PreMonth: function() {
this.PreDraw(new Date(this.Year, this.Month - 2, 1));
},
//下一月
NextMonth: function() {
this.PreDraw(new Date(this.Year, this.Month, 1));
},
//上一年
PreYear: function() {
this.PreDraw(new Date(this.Year - 1, this.Month - 1, 1));
},
//下一年
NextYear: function() {
this.PreDraw(new Date(this.Year + 1, this.Month - 1, 1));
},
//根据日期画日历
PreDraw: function(date) {
//再设置属性
this.Year = date.getFullYear(); this.Month = date.getMonth() + 1;
//重新画日历
this.Draw();
},
//画日历
Draw: function() {
//用来保存日期列表
var arr = [];
//用当月第一天在一周中的日期值作为当月离第一天的天数
for(var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++){ arr.push(0); }
//用当月最后一天在一个月中的日期值作为当月的天数
for(var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++){ arr.push(i); }
//清空原来的日期对象列表
this.Days = [];
//插入日期
var frag = document.createDocumentFragment();
while(arr.length){
//每个星期插入一个tr
var row = document.createElement("tr");
//每个星期有7天
for(var i = 1; i <= 7; i++){
var cell = document.createElement("td"); cell.innerHTML = " ";
if(arr.length){
var d = arr.shift();
if(d){
cell.innerHTML = d;
this.Days[d] = cell;
var on = new Date(this.Year, this.Month - 1, d);
//判断是否今日
this.IsSame(on, new Date()) && this.onToday(cell);
//判断是否选择日期
this.SelectDay && this.IsSame(on, this.SelectDay) && this.onSelectDay(cell);
}
}
row.appendChild(cell);
}
frag.appendChild(row);
}
//先清空内容再插入(ie的table不能用innerHTML)
while(this.Container.hasChildNodes()){ this.Container.removeChild(this.Container.firstChild); }
this.Container.appendChild(frag);
//附加程序
this.onFinish();
},
//判断是否同一日
IsSame: function(d1, d2) {
return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
}
}
</script>

××××××××样式表的定义

复制代码 代码如下:

<style type="text/css">
.Calendar {
font-family:Verdana;
font-size:12px;
background-color:#e0ecf9;
text-align:center;
width:400px;
height:180px;
padding:10px;
line-height:1.5em;
}
.Calendar a{
color:#1e5494;
}
.Calendar table{
width:100%;
border:0;
}
.Calendar table thead{color:#acacac;}
.Calendar table td {
font-size: 11px;
padding:1px;
}
#idCalendarPre{
cursor:pointer;
float:left;
padding-right:5px;
}
#idCalendarNext{
cursor:pointer;
float:right;
padding-right:5px;
}
#idCalendar td.onToday {
font-weight:bold;
color:#C60;
}
#idCalendar td.onSelect {
font-weight:bold;
}
#buttonposition{
margin-left: 10%;
}
</style>

***********下面是应用的主体部分

复制代码 代码如下:

<div class="Calendar">
<div id="idCalendarPre"><<</div>
<div id="idCalendarNext">>></div>
<span id="idCalendarYear"></span>年 <span id="idCalendarMonth"></span>月
<table cellspacing="0">
<thead>
<tr>
<td>日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
</thead>
<tbody id="idCalendar">
</tbody>
</table>
</div>
<div id="buttonposition" ><!-- 通过id获取样式 -->
<input id="idCalendarPreYear" type="button" class="bt" value="上一年" />
<input id="idCalendarNow" type="button" class="bt" value="当前月" />
<input id="idCalendarNextYear" type="button" class="bt" value="下一年" />
</div>
<script language="JavaScript">
var cale = new Calendar("idCalendar", {
onToday: function(o){ o.className = "onToday"; },
onFinish: function(){
$("idCalendarYear").innerHTML = this.Year; $("idCalendarMonth").innerHTML = this.Month;
}
});
$("idCalendarPre").onclick = function(){ cale.PreMonth(); }
$("idCalendarNext").onclick = function(){ cale.NextMonth(); }
$("idCalendarPreYear").onclick = function(){ cale.PreYear(); }
$("idCalendarNextYear").onclick = function(){ cale.NextYear(); }
$("idCalendarNow").onclick = function(){ cale.NowMonth(); }
</script>
</div>

时间: 2024-10-25 00:24:32

一个js写的日历(代码部分网摘)_时间日期的相关文章

无聊,写了个日历程序,欢迎拍砖_时间日期

一个通用的日历程序,IE6.Mozilal系列测试通过.欢迎使用

有没有一个js写的图片截图插件

问题描述 有没有一个js写的图片截图插件 求一个js写的图片截图插件,兼容ie8,ie9,实现无刷新上传, 解决方案 http://deepliquid.com/content/Jcrop.html 实现图片区域截取的,无刷新直接将选中的图片提交到iframe来上传就行了.ie10+才支持html5的formdata,可以用ajax来实现上传

能否通过node.js写一段代码 实现自动导出svn的提交日志?

问题描述 能否通过node.js写一段代码 实现自动导出svn的提交日志? 目前的难点是只能查看svn的提交日志 无法通过代码获取 求提示 解决方案 http://blog.csdn.net/xu1314/article/details/6185361

javascript 格式化时间日期函数代码脚本之家修正版_时间日期

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] javascript格式化日期时间函数_时间日期_http://www.jb51.net/article/14753.htm

兼容FireFox 的 js 日历 支持时间的获取_时间日期

复制代码 代码如下: var cal; var isFocus=false; //是否为焦点 var pickMode ={ "second":1, "minute":2, "hour":3, "day":4, "month":5, "year":6 }; var topY=0,leftX=0; //自定义定位偏移量 2007-02-11 由 寒羽枫添加 //选择日期 → 由 寒羽枫 2

JS 显示当前日期与时间的代码_时间日期

JS 显示当前日期 复制代码 代码如下: <script language="Javascript"> var datelocalweek=new Array("星期日", "星期一", "星期二","星期三","星期四", "星期五","星期六"); var datelocalnow=new Date(); var datelocal

完整显示当前日期和时间的JS代码_时间日期

代码演示效果为"2007年2月25日星期日正午12:42:48". 使用方法:将下面的JS代码放到你想要显示的页面中(支持HTML页面),然后在你想要显示时间的位置插入下面的代码即可 <div id="Clock" align="center" style="font-size: 12px; color:#000000"></div> JS代码如下: <script> function ti

Js 获取当前日期时间及其它操作实现代码_时间日期

myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) myDate.getDate(); //获取当前日(1-31) myDate.getDay(); //获取当前星期X(0-6,0代表星期天) myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数) myDate.getHours();

JavaScript 模仿vbs中的 DateAdd() 函数的代码_时间日期

项目中需要用到日历,.net的日历控件又太重,只好用js写一个,日历的核心函数是 DateAdd(),编写过程中发现 js 里面操作时间比想象中的繁琐,不像vbscript中的可以轻松地dateadd,后来才想到用 setFullYear().setDate()等内置函数,可以拼合一个js版的 dateadd() 来,代码如下: 复制代码 代码如下: function DateAdd(interval,number,date){ // date 可以是时间对象也可以是字符串,如果是后者,形式必须