首页 >> 读书频道 >> 电脑 >> 用JAVASCRIPT实现的日历
 
· 用JavaScript实
· 几个Javascript
· JavaScript支持
· javascript做的
· 一个通用验证javasc
· javascript 扫
· HTML文档中用Java
· Trim Functio
· Javascript的h
· 有趣的javascrip
· Javascript 实
· javascript里类
 
· 素质教育在美国
· 全唐诗卷四十六
· 韩剧《布拉格恋人》剧情介
· 夜航船[作者:明·张岱]
· 局外人[作者:韩·可爱淘
· 现场流行病学
· 源氏物语[日本:紫式部]
· 红楼梦:120回全本[清
· 武林寓言故事
· 2006高考录取规则
· 首批中国世界名牌产品和2
· 济南美食大全
 
· (出租)中动商场部分及写
· (出租)中动动漫基地&#
· 喜剧学院
· 《善德女王》剧情介绍
· 魔女18号 剧情
· 丑女无敌剧情介绍
· 魔女幼熙剧情介绍
· 龙游天下剧情介绍
· 震撼世界的七日剧情介绍
· 静静的白桦林剧情介绍
· 心情日记—老公今天我想对
· 旗舰剧情介绍
欢迎来到月影社区!如果您觉得这里不错,请推荐给您的朋友们。月影社区:http://wf66.com/

用JAVASCRIPT实现的日历


查看有无更新版本

关键字:JavaScript 2006-8-28

 

calendar.css:
.cal {
background-color: #ffffff;
}
.head {
color: #bb0000;
font-family: Arial;
font-weight: bold;
text-align: left;
}
.days {
color: #0000bb;
font-family: Arial;
font-weight: bold;
text-align: right;
}
.grey {
color: #ffffff;
font-family: Arial;
font-size: small;
text-align: right;
}
.links {
color: #ff0000;
font-family: Arial;
font-size: small;
text-align: right;
}
.today {
color: #ffffff;
background-color: #ff0000;
font-family: Arial;
font-size: small;
text-align: right;
}
calendar.js:
'January','February','March',
'April','May','June','July',
'August','September','October',
'November','December'
);
var daysOfMonth = new Array(
31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31
);
var daysOfMonthLY = new Array(
31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31
);
var dow = new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat',
'Sun','Mon','Tue','Wed','Thu','Fri');
var size = 'width="50" height="30"';
var border = 'border="1"';
function isLeapYear(num) {
if (((num % 4 == 0) && (num % 100 != 0)) || (num % 400 == 0))
return true;
return false;
}
function CalendarSelect(Month,Year, offset) {
if (offset == null) offset = 0;
if (window.changeMonth) { }
else {
alert('A changeMonth() function has not been defined');
return '';
}
if (window.changeYear) { }
else {
alert('A changeYear() function has not been defined');
return '';
}
if (window.changeDay) { }
else {
alert('A changeDay() function has not been defined');
return '';
}
var output = '';
output += '<form name="Cal">';
output += CalendarHead(Month,Year,true);
output += CalendarMonth(Month,Year,offset);
output += '</form>';
return output;
}
function CalendarHead(Month,Year,Select) {
var output = '';
output +=
'<table cellspacing="0" class="cal">' +
'<tr><td align="left" width="100%" class="head">' +
moy[Month-1] + ' ' + Year +
'</td>';
if (Select) {
output += '<td width="50%" align="right">' +
'<select name="Month" onChange="CalMonth()">';
for (var month=1; month<=12; month++) {
output += '<option value="' + month + '"';
if (month == Month) output += ' selected';
output += '>' + moy[month-1] + '</option>';
}
output += '</select>' +
'<select name="Year" onChange="CalYear();">';
for (var year=1900; year<=2100; year++) {
output += '<option value="' + year + '"';
if (year == Year) output += ' selected';
output += '>' + year + '</option>';
}
output += '</select>';
}
output += '</td></tr></table>';
return output;
}
function CalendarMonth(M,Y,offset) {
M--;
if (offset == null) offset = 0;
firstDay = new Date(Y,M,1);
startDay = firstDay.getDay();
if (startDay < offset) startDay += 7;
var days = daysOfMonth;
if (isLeapYear(Y)) days = daysOfMonthLY;
var output = '';
output +=
'<table ' + border + ' cellpadding="0" class="cal"><tr>';
for (var i=0; i<7; i++)
output += '<td ' + size + ' class="days">' +
dow[i + offset] + '</td>';
output += '</tr><tr>';
var column = 0;
var lastM = M - 1;
if (lastM == -1) lastM = 11;
for (var i=0+offset; i<startDay; i++, column++)
output += '<td ' + size + ' class="grey">' +
(days[lastM]-startDay+i+1) + '</td>';
for (var i=1; i<=days[M]; i++, column++) {
var style = ' class="links"';
if (day == i && month == M+1 && year == Y)
style = ' class="today"';
if (window.changeDay)
output += '<td ' + size + '>' +
'<a href="javascript:CalDay('+i+','+(M+1)+','+Y+')"' +
style + '>' + i + '</a></td>';
else
output += '<td ' + size + style + '>' + i + '</td>';
if (column == 6) {
output += '</tr><tr>';
column = -1;
}
}
if (column > 0) {
for (var i=1; column<7; i++, column++)
output += '<td ' + size + ' class="grey">' + i + '</td>';
}
output += '</tr></table>';
return output;
}
function getAnOptionValue(what) {
return what.options[what.options.selectedIndex].value;
}
function CalMonth() {
CalendarMonth = getAnOptionValue(document.Cal.Month) - 0;
changeMonth(CalendarMonth);
}
function CalYear() {
CalendarYear = getAnOptionValue(document.Cal.Year) - 0;
changeYear(CalendarYear);
}
function CalDay(day,month,year) {
CalendarDay = day;
CalendarMonth = month;
CalendarYear = year;
changeDay(CalendarDay,CalendarMonth,CalendarYear);
}
var CalendarMonth;
var CalendarYear;
var CalendarDay;

current.js:
function getFullYear() {
var year = this.getYear();
if (year < 1000) year += 1900;
return year;
}
if (!Date.getFullYear)
Date.prototype.getFullYear = getFullYear;
function getMilliseconds() {
var date = new Date(
this.getFullYear(), this.getMonth(), this.getDate(),
this.getHours(), this.getMinutes(), this.getSeconds(), 0
);
return this.getTime() - date.getTime();
}
if (!Date.getMilliseconds)
Date.prototype.getMilliseconds = getMilliseconds;
var daysOfWeek = new Array(
'Sunday','Monday','Tuesday','Wednesday',
'Thursday','Friday','Saturday'
);
var monthsOfYear = new Array(
'January','February','March','April','May','June',
'July','August','September','October','November','December'
);
function y2k(number) {
number = number - 0;
return (number < 1000) ? number + 1900 : number;
}
function dayOfWeek(day,month,year) {
var a = Math.floor((14 - month)/12);
var y = year - a;
var m = month + 12*a - 2;
var d = (day + y + Math.floor(y/4) - Math.floor(y/100) +
Math.floor(y/400) + Math.floor((31*m)/12)) % 7;
return d;
}
function nths(day) {
if (day == 1 || day == 21 || day == 31) return 'st';
if (day == 2 || day == 22) return 'nd';
if (day == 3 || day == 23) return 'rd';
return 'th';
}
function formatFullDate(day,month,year) {
var dow = dayOfWeek(day,month,year);
return daysOfWeek[dow] + ' ' +
day + nths(day) + ' ' +
monthsOfYear[month-1] +' '+ year;
}
function padout(num) {
return (num < 10) ? '0' + num : num;
}
function formatShortDate(day,month,year) {
return padout(day) + '/' + padout(month) + '/' + year;
}
function formatShortDateUS(day,month,year) {
return padout(month) + '/' + padout(day) + '/' + year;
}

index.htm:
<html>
<head>
<title>Calendar</title>
<link rel="stylesheet" href="calendar.css" type="text/css">
<script language="JavaScript" src="current.js"></script>
<script language="JavaScript" src="calendar.js"></script>
</head>
<body bgcolor="#ffffff">
<center>
<script language="JavaScript"><!--
size = '';
border = 'border="0"';
dow = new Array('S','M','T','W','T','F','S',
'S','M','T','W','T','F');
moy = new Array(
'Jan','Feb','Mar','Apr','May','Jun',
'Jul','Aug','Sep','Oct','Nov','Dec'
);
function changeDay(day, month, year) {
alert(new Date(year, month, day));
}
var output = '';
if (window.formatFullDate && window.CalendarSelect) {
var today = new Date();
var day = today.getDate();
var month = today.getMonth() + 1;
var year = today.getFullYear();
output +=
'<table class="cal" border="1"><tr><td valign="top">';
for (var i = 1; i <= 12; i++) {
output += '<table><tr><td>' +
CalendarHead(i,year) +
CalendarMonth(i,year,1) +
'</td></tr></table>';
if (i != 12) {
if (i % 3 == 0)
output += '</td></tr><tr><td valign="top">';
else
output += '</td><td valign="top">';
}
}
output += '</td></tr></table>';
}
document.write(output);
//--></script>
</center>
</body>
</html>
把这四个文件放在同一目录下。运行index.htm

用JAVASCRIPT实现的日历

[ 1 ]
用JAVASCRIPT实现的日历 num

打印本页 关闭

关于我们版权声明本站导航友情连结作品演示 TOP↑