<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Javascript日历</title> 
<table cellpadding="0" cellspacing="0" id="1"> 
<tr> 
<td> 
<style> 
body,td,.p1,.p2,.i{font-family:arial} body{margin:6px 0 0 0;background-color:#fff;color:#000;} 
table{border:0} #cal{width:434px;border:1px solid #c3d9ff;font-size:12px;margin:8px 
0 0 15px} #cal #top{height:29px;line-height:29px;background:#e7eef8;color:#003784;padding-left:70px} 
#cal #top select{font-size:12px} #cal #top input{padding:0} #cal ul#wk{margin:0;padding:0;height:25px} 
#cal ul#wk li{float:left;width:60px;text-align:center;line-height:25px;list-style:none} 
#cal ul#wk li b{font-weight:normal;color:#c60b02} #cal #cm{clear:left;border-top:1px 
solid #ddd;border-bottom:1px dotted #ddd;position:relative} #cal #cm .cell{position:absolute;width:42px;height:36px;text-align:center;margin:0 
0 0 9px} #cal #cm .cell .so{font:bold 16px arial;} #cal #bm{text-align:right;height:24px;line-height:24px;padding:0 
13px 0 0} #cal #bm a{color:7977ce} #cal #fd{display:none;position:absolute;border:1px 
solid #dddddf;background:#feffcd;padding:10px;line-height:21px;width:150px} 
#cal #fd b{font-weight:normal;color:#c60a00} 
</style> 
<!--[if IE]> 
<style> 
#cal #top{padding-top:4px} #cal #top input{width:65px} #cal #fd{width:170px} 
</style> 
<![endif]--> 
<div id="cal"> 
<div id="top"> 
公元 
<select> 
</select> 
年 
<select> 
</select> 
月 农历 
<span> 
</span> 
年 [ 
<span> 
</span> 
年 ] 
<input type="button" value="回到今天" title="点击后跳转回今天" style="padding:0px"> 
</div> 
<ul id="wk"> 
<li> 
一 
</li> 
<li> 
二 
</li> 
<li> 
三 
</li> 
<li> 
四 
</li> 
<li> 
五 
</li> 
<li> 
<b> 
六 
</b> 
</li> 
<li> 
<b> 
日 
</b> 
</li> 
</ul> 
<div id="cm"> 
</div> 
<div id="bm"> 
</div> 
</div> 
</td> 
</tr> 
</table> 
<script type="text/javascript"> 
(function() { 
var S = navigator.userAgent.indexOf("MSIE") != -1 && !window.opera; 
function M(C) { 
return document.getElementById(C) 

function R(C) { 
return document.createElement(C) 

var P = [19416, 19168, 42352, 21717, 53856, 55632, 91476, 22176, 39632, 21970, 19168, 42422, 42192, 53840, 119381, 46400, 54944, 44450, 38320, 84343, 18800, 42160, 46261, 27216, 27968, 109396, 11104, 38256, 21234, 18800, 25958, 54432, 59984, 28309, 23248, 11104, 100067, 37600, 116951, 51536, 54432, 120998, 46416, 22176, 107956, 9680, 37584, 53938, 43344, 46423, 27808, 46416, 86869, 19872, 42448, 83315, 21200, 43432, 59728, 27296, 44710, 43856, 19296, 43748, 42352, 21088, 62051, 55632, 23383, 22176, 38608, 19925, 19152, 42192, 54484, 53840, 54616, 46400, 46496, 103846, 38320, 18864, 43380, 42160, 45690, 27216, 27968, 44870, 43872, 38256, 19189, 18800, 25776, 29859, 59984, 27480, 21952, 43872, 38613, 37600, 51552, 55636, 54432, 55888, 30034, 22176, 43959, 9680, 37584, 51893, 43344, 46240, 47780, 44368, 21977, 19360, 42416, 86390, 21168, 43312, 31060, 27296, 44368, 23378, 19296, 42726, 42208, 53856, 60005, 54576, 23200, 30371, 38608, 19415, 19152, 42192, 118966, 53840, 54560, 56645, 46496, 22224, 21938, 18864, 42359, 42160, 43600, 111189, 27936, 44448]; 
var K = "甲乙丙丁戊己庚辛壬癸"; 
var J = "子丑寅卯辰巳午未申酉戌亥"; 
var O = "鼠牛虎兔龙蛇马羊猴鸡狗猪"; 
var L = ["小寒", "大寒", "立春", "雨水", "惊蛰", "春分", "清明", "谷雨", "立夏", "小满", "芒种", "夏至", "小暑", "大暑", "立秋", "处暑", "白露", "秋分", "寒露", "霜降", "立冬", "小雪", "大雪", "冬至"]; 
var D = [0, 21208, 43467, 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693, 263343, 285989, 308563, 331033, 353350, 375494, 397447, 419210, 440795, 462224, 483532, 504758]; 
var B = "日一二三四五六七八九十"; 
var H = ["正", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "腊"]; 
var E = "初十廿卅"; 
var V = { 
"0101": "*1元旦节", 
"0214": "情人节", 
"0305": "学雷锋纪念日", 
"0308": "妇女节", 
"0312": "植树节", 
"0315": "消费者权益日", 
"0401": "愚人节", 
"0501": "*1劳动节", 
"0504": "青年节", 
"0601": "国际儿童节", 
"0701": "中共党诞辰", 
"0801": "建军节", 
"0910": "中国教师节", 
"1001": "*3国庆节", 
"1224": "平安夜", 
"1225": "圣诞节" 
}; 
var T = { 
"0101": "*2春节", 
"0115": "元宵节", 
"0505": "*1端午节", 
"0815": "*1中秋节", 
"0909": "重阳节", 
"1208": "腊八节", 
"0100": "除夕" 
}; 
function U(Y) { 
function c(j, i) { 
var h = new Date((31556925974.7 * (j - 1900) + D[i] * 60000) + Date.UTC(1900, 0, 6, 2, 5)); 
return (h.getUTCDate()) 

function d(k) { 
var h, j = 348; 
for (h = 32768; h > 8; h >>= 1) { 
j += (P[k - 1900] & h) ? 1 : 0 

return (j + b(k)) 

function a(h) { 
return (K.charAt(h % 10) + J.charAt(h % 12)) 

function b(h) { 
if (g(h)) { 
return ((P[h - 1900] & 65536) ? 30 : 29) 
} else { 
return (0) 


function g(h) { 
return (P[h - 1900] & 15) 

function e(i, h) { 
return ((P[i - 1900] & (65536 >> h)) ? 30 : 29) 

function C(m) { 
var k, j = 0, 
h = 0; 
var l = new Date(1900, 0, 31); 
var n = (m - l) / 86400000; 
this.dayCyl = n + 40; 
this.monCyl = 14; 
for (k = 1900; k < 2050 && n > 0; k++) { 
h = d(k); 
n -= h; 
this.monCyl += 12 

if (n < 0) { 
n += h; 
k--; 
this.monCyl -= 12 

this.year = k; 
this.yearCyl = k - 1864; 
j = g(k); 
this.isLeap = false; 
for (k = 1; k < 13 && n > 0; k++) { 
if (j > 0 && k == (j + 1) && this.isLeap == false) {--k; 
this.isLeap = true; 
h = b(this.year) 
} else { 
h = e(this.year, k) 

if (this.isLeap == true && k == (j + 1)) { 
this.isLeap = false 

n -= h; 
if (this.isLeap == false) { 
this.monCyl++ 


if (n == 0 && j > 0 && k == j + 1) { 
if (this.isLeap) { 
this.isLeap = false 
} else { 
this.isLeap = true; --k; --this.monCyl 


if (n < 0) { 
n += h; --k; --this.monCyl 

this.month = k; 
this.day = n + 1 

function G(h) { 
return h < 10 ? "0" + h: h 

function f(i, j) { 
var h = i; 
return j.replace(/dd?d?d?|MM?M?M?|yy?y?y?/g, 
function(k) { 
switch (k) { 
case "yyyy": 
var l = "000" + h.getFullYear(); 
return l.substring(l.length - 4); 
case "dd": 
return G(h.getDate()); 
case "d": 
return h.getDate().toString(); 
case "MM": 
return G((h.getMonth() + 1)); 
case "M": 
return h.getMonth() + 1 

}) 

function Z(i, h) { 
var j; 
switch (i, h) { 
case 10: 
j = "初十"; 
break; 
case 20: 
j = "二十"; 
break; 
case 30: 
j = "三十"; 
break; 
default: 
j = E.charAt(Math.floor(h / 10)); 
j += B.charAt(h % 10) 

return (j) 

this.date = Y; 
this.isToday = false; 
this.isRestDay = false; 
this.solarYear = f(Y, "yyyy"); 
this.solarMonth = f(Y, "M"); 
this.solarDate = f(Y, "d"); 
this.solarWeekDay = Y.getDay(); 
this.solarWeekDayInChinese = "星期" + B.charAt(this.solarWeekDay); 
var X = new C(Y); 
this.lunarYear = X.year; 
this.shengxiao = O.charAt((this.lunarYear - 4) % 12); 
this.lunarMonth = X.month; 
this.lunarIsLeapMonth = X.isLeap; 
this.lunarMonthInChinese = this.lunarIsLeapMonth ? "闰" + H[X.month - 1] : H[X.month - 1]; 
this.lunarDate = X.day; 
this.showInLunar = this.lunarDateInChinese = Z(this.lunarMonth, this.lunarDate); 
if (this.lunarDate == 1) { 
this.showInLunar = this.lunarMonthInChinese + "月" 

this.ganzhiYear = a(X.yearCyl); 
this.ganzhiMonth = a(X.monCyl); 
this.ganzhiDate = a(X.dayCyl++); 
this.jieqi = ""; 
this.restDays = 0; 
if (c(this.solarYear, (this.solarMonth - 1) * 2) == f(Y, "d")) { 
this.showInLunar = this.jieqi = L[(this.solarMonth - 1) * 2] 

if (c(this.solarYear, (this.solarMonth - 1) * 2 + 1) == f(Y, "d")) { 
this.showInLunar = this.jieqi = L[(this.solarMonth - 1) * 2 + 1] 

if (this.showInLunar == "清明") { 
this.showInLunar = "清明节"; 
this.restDays = 1 

this.solarFestival = V[f(Y, "MM") + f(Y, "dd")]; 
if (typeof this.solarFestival == "undefined") { 
this.solarFestival = "" 
} else { 
if (/\*(\d)/.test(this.solarFestival)) { 
this.restDays = parseInt(RegExp.$1); 
this.solarFestival = this.solarFestival.replace(/\*\d/, "") 


this.showInLunar = (this.solarFestival == "") ? this.showInLunar: this.solarFestival; 
this.lunarFestival = T[this.lunarIsLeapMonth ? "00": G(this.lunarMonth) + G(this.lunarDate)]; 
if (typeof this.lunarFestival == "undefined") { 
this.lunarFestival = "" 
} else { 
if (/\*(\d)/.test(this.lunarFestival)) { 
this.restDays = (this.restDays > parseInt(RegExp.$1)) ? this.restDays: parseInt(RegExp.$1); 
this.lunarFestival = this.lunarFestival.replace(/\*\d/, "") 


if (this.lunarMonth == 12 && this.lunarDate == e(this.lunarYear, 12)) { 
this.lunarFestival = T["0100"]; 
this.restDays = 1 

this.showInLunar = (this.lunarFestival == "") ? this.showInLunar: this.lunarFestival; 
this.showInLunar = (this.showInLunar.length > 4) ? this.showInLunar.substr(0, 2) + "...": this.showInLunar 

var Q = (function() { 
var X = {}; 
X.lines = 0; 
X.dateArray = new Array(42); 
function Y(a) { 
return (((a % 4 === 0) && (a % 100 !== 0)) || (a % 400 === 0)) 

function G(a, b) { 
return [31, (Y(a) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][b] 

function C(a, b) { 
a.setDate(a.getDate() + b); 
return a 

function Z(a) { 
var f = 0; 
var c = new U(new Date(a.solarYear, a.solarMonth - 1, 1)); 
var d = (c.solarWeekDay - 1 == -1) ? 6 : c.solarWeekDay - 1; 
X.lines = Math.ceil((d + G(a.solarYear, a.solarMonth - 1)) / 7); 
for (var e = 0; e < X.dateArray.length; e++) { 
if (c.restDays != 0) { 
f = c.restDays 

if (f > 0) { 
c.isRest = true 

if (d-->0 || c.solarMonth != a.solarMonth) { 
X.dateArray[e] = null; 
continue 

var b = new U(new Date()); 
if (c.solarYear == b.solarYear && c.solarMonth == b.solarMonth && c.solarDate == b.solarDate) { 
c.isToday = true 

X.dateArray[e] = c; 
c = new U(C(c.date, 1)); 
f-- 


return { 
init: function(a) { 
Z(a) 
}, 
getJson: function() { 
return X 


})(); 
var W = (function() { 
var C = M("top").getElementsByTagName("SELECT")[0]; 
var X = M("top").getElementsByTagName("SELECT")[1]; 
var G = M("top").getElementsByTagName("SPAN")[0]; 
var c = M("top").getElementsByTagName("SPAN")[1]; 
var Y = M("top").getElementsByTagName("INPUT")[0]; 
function a(g) { 
G.innerHTML = g.ganzhiYear; 
c.innerHTML = g.shengxiao 

function b(g) { 
C[g.solarYear - 1901].selected = true; 
X[g.solarMonth - 1].selected = true 

function f() { 
var j = C.value; 
var g = X.value; 
var i = new U(new Date(j, g - 1, 1)); 
Q.init(i); 
N.draw(); 
if (this == C) { 
i = new U(new Date(j, 3, 1)); 
G.innerHTML = i.ganzhiYear; 
c.innerHTML = i.shengxiao 

var h = new U(new Date()); 
Y.style.visibility = (j == h.solarYear && g == h.solarMonth) ? "hidden": "visible" 

function Z() { 
var g = new U(new Date()); 
a(g); 
b(g); 
Q.init(g); 
N.draw(); 
Y.style.visibility = "hidden" 

function d(k, g) { 
for (var j = 1901; j < 2050; j++) { 
var h = R("OPTION"); 
h.value = j; 
h.innerHTML = j; 
if (j == k) { 
h.selected = "selected" 

C.appendChild(h) 

for (var j = 1; j < 13; j++) { 
var h = R("OPTION"); 
h.value = j; 
h.innerHTML = j; 
if (j == g) { 
h.selected = "selected" 

X.appendChild(h) 

C.onchange = f; 
X.onchange = f 

function e(g) { 
d(g.solarYear, g.solarMonth); 
G.innerHTML = g.ganzhiYear; 
c.innerHTML = g.shengxiao; 
Y.onclick = Z; 
Y.style.visibility = "hidden" 

return { 
init: function(g) { 
e(g) 
}, 
reset: function(g) { 
b(g) 


})(); 
var N = (function() { 
function C() { 
var Z = Q.getJson(); 
var c = Z.dateArray; 
M("cm").style.height = Z.lines * 38 + 2 + "px"; 
M("cm").innerHTML = ""; 
for (var a = 0; a < c.length; a++) { 
if (c[a] == null) { 
continue 

var X = R("DIV"); 
if (c[a].isToday) { 
X.style.border = "1px solid #a5b9da"; 
X.style.background = "#c1d9ff" 

X.className = "cell"; 
X.style.left = (a % 7) * 60 + "px"; 
X.style.top = Math.floor(a / 7) * 38 + 2 + "px"; 
var b = R("DIV"); 
b.className = "so"; 
// http://www.codefans.net 
b.style.color = ((a % 7) > 4 || c[a].isRest) ? "#c60b02": "#313131"; 
b.innerHTML = c[a].solarDate; 
X.appendChild(b); 
var Y = R("DIV"); 
Y.style.color = "#666"; 
Y.innerHTML = c[a].showInLunar; 
X.appendChild(Y); 
X.onmouseover = (function(d) { 
return function(f) { 
F.show({ 
dateIndex: d, 
cell: this 
}) 

})(a); 
X.onmouseout = function() { 
F.hide() 
}; 
X.onmouseup = function() { 
//alert('a');
}; 
M("cm").appendChild(X) 

var G = R("DIV"); 
G.id = "fd"; 
M("cm").appendChild(G); 
F.init(G) 

return { 
draw: function(G) { 
C(G) 


})(); 
var F = (function() { 
var C; 
function Y(e, c) { 
if (arguments.length > 1) { 
var b = /([.*+?^=!:${}()|[\]\/\\])/g, 
Z = "{".replace(b, "\\$1"), 
d = "}".replace(b, "\\$1"); 
var a = new RegExp("#" + Z + "([^" + Z + d + "]+)" + d, "g"); 
if (typeof(c) == "object") { 
return e.replace(a, 
function(f, h) { 
var g = c[h]; 
return typeof(g) == "undefined" ? "": g 
}) 


return e 

function G(b) { 
var a = Q.getJson().dateArray[b.dateIndex]; 
var Z = b.cell; 
var c = "#{solarYear} 年 #{solarMonth} 月 #{solarDate} 日 #{solarWeekDayInChinese}"; 
c += "<br><b>农历 #{lunarMonthInChinese}月#{lunarDateInChinese}</b>"; 
c += "<br>#{ganzhiYear}年 #{ganzhiMonth}月 #{ganzhiDate}日"; 
if (a.solarFestival != "" || a.lunarFestival != "" || a.jieqi != "") { 
c += "<br><b>#{lunarFestival} #{solarFestival} #{jieqi}</b>" 

C.innerHTML = Y(c, a); 
C.style.top = Z.offsetTop + Z.offsetHeight - 5 + "px"; 
C.style.left = Z.offsetLeft + Z.offsetWidth - 5 + "px"; 
C.style.display = "block" 

function X() { 
C.style.display = "none" 

return { 
show: function(Z) { 
G(Z) 
}, 
hide: function() { 
X() 
}, 
init: function(Z) { 
C = Z 


})(); 
var A = new U(new Date()); 
if (S) { 
window.attachEvent("onload", 
function() { 
W.reset(A) 
}) 

W.init(A); 
Q.init(A); 
N.draw(); 
})(); 
</script>

//

Javascript之日历的更多相关文章

  1. javascript 小日历

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  2. 完全原生javascript简约日历插件,js、html

    效果图: 效果如图所示,尽管看上去并不是很美观,但是,基本上的功能还是已经完成了,码了一天多的时间,权当做复习一下js吧. 整个做下来差不多码了500多行代码~其实只是很多的样式也包括了在其中了,虽然 ...

  3. JavaScript简易日历

    <!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. javascript 模拟日历

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

  5. javascript简易日历制作

    学习记录 01.练习数组的用法 02.理解this.index的用法 03.绑定事件深入练习理解 html代码 <div id="date"> <ul id=&q ...

  6. javaScript实现日历控件

    近期学习js.闲来无事就写了个简单的日历控件.不知道别人是怎么实现的.纯粹自己想法写的, 写的不好 ,但能够起到抛砖引玉的作用. 先来看效果. watermark/2/text/aHR0cDovL2J ...

  7. JavaScript日历控件开发

    概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果 代码地址:https://github.com/aspwebchh/javascript-cont ...

  8. JavaScript日历控件开发 C# 读取 appconfig文件配置数据库连接字符串,和配置文件 List<T>.ForEach 调用异步方法的意外 ef 增加或者更新的习惯思维 asp.net core导入excel 一个二级联动

    JavaScript日历控件开发   概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果代码地址:https://github.com/aspwebc ...

  9. HTML+JavaScript自己动手做日历

    当我们需要在页面中显示某月的事项,或是选择某一段日期时,常常要使用到日历组件.这一组件同样有着许多现成的类库,然而亲自动手开发一个日历,从中了解其实现原理也是非常必要的.在本例中我们就将制作一款非常经 ...

随机推荐

  1. android 根据SD卡中图片路径读取并显示SD中的图片——源代码

    package com.guo; import java.io.File; import android.app.Activity; import android.graphics.Bitmap; i ...

  2. C++学习笔记之作用域为类的常量和作用域内的枚举

    一.作用域为类的常量 有些情况下,使符号常量的作用域为类很有用.如,类声明(不是定义)可能使用字面值30来指定数组长度,由于该常量对于所有对象来说都是相同的,因此创建一个由所有对象共享的常量是个不错的 ...

  3. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

  4. SQL SERVER中查找某关键词位于哪些存储过程或函数

    USE [MYDB] go SELECT * FROM INFORMATION_SCHEMA.ROUTINES WHERE routine_type='PROCEDURE' AND routine_d ...

  5. oracle 有用站点

    使用oradebug修改数据库scn – 提供专业ORACLE技术咨询和支持@Phone13429648788 - 惜分飞 Solaris上使用DTrace进行动态跟踪 老熊的三分地-Oracle及数 ...

  6. BigDecimal带精度的运算的两篇文章

    转自:http://guoliangqi.iteye.com/blog/670908 之前提到过在商业运算中要使用BigDecimal来进行相关的钱的运算(java中关于浮点运算需要注意的 ),可是实 ...

  7. careercup-高等难度 18.6

    18.6 设计一个算法,给定10亿个数字,找出最小的100万个数字.假定计算机内存足以容纳全部10亿个数字. 解法: 方法1:排序 按升序排序所有的元素,然后取出前100万个数,时间复杂度为O(nlo ...

  8. 40多个关于人脸检测/识别的API、库和软件

    英文原文:List of 40+ Face Detection / Recognition APIs, libraries, and software 译者:@吕抒真 译文:链接 自从谷歌眼镜被推出以 ...

  9. The Kernel Newbie Corner: Kernel Debugging with proc "Sequence" Files--Part 3

    转载:https://www.linux.com/learn/linux-career-center/44184-the-kernel-newbie-corner-kernel-debugging-w ...

  10. 关于变量在for循环内外定义的思考

    在c#或java里面,我们通常会这样写for循环: ;i<;i++) { Console.WriteLine(i); } 前一阵子,我突发奇想,如果按照下面这样写,会不会比上面的运行效率高一些: ...