我们经常需要的一些web项目中用到日历,这样的脚本写起来又麻烦,功能又不够强大,现在豆腐给大家
提供一个功能强大的日历程序,这段脚本使用完全的客户端的js脚本制作,运行速度快。
下面大家就来看看,还有什么需要改进的地方,先看看效果再说吧!日历演示
<html>
<head>
<title>豆腐日历</title>
<!– 请不要删除这段版权信息 –>
<!–
豆腐制作 都是精品
http://www.asp888.net 豆腐技术站
–>
<style type="text/css">
.normal{background: #ffffff}
.today {font-weight:bold;background: #6699cc}
.satday{color:green}
.sunday{color:red}
.days {font-weight:bold}
</style>
<script language="javascript">
//中文月份,如果想显示英文月份,修改下面的注释
/*var months = new array("january?, "february?, "march",
"april", "may", "june", "july", "august", "september",
"october", "november", "december");*/
var months = new array("一月", "二月", "三月",
"四月", "五月", "六月", "七月", "八月", "九月",
"十月", "十一月", "十二月");
var daysinmonth = new array(31, 28, 31, 30, 31, 30, 31, 31,
30, 31, 30, 31);
//中文周 如果想显示 英文的,修改下面的注释
/*var days = new array("sunday", "monday", "tuesday",
"wednesday", "thursday", "friday", "saturday");*/
var days = new array("日","一", "二", "三",
"四", "五", "六");
function getdays(month, year) {
//下面的这段代码是判断当前是否是闰年的
if (1 == month)
return ((0 == year % 4) && (0 != (year % 100))) ||
(0 == year % 400) ? 29 : 28;
else
return daysinmonth[month];
}
function gettoday() {
//得到今天的年,月,日
this.now = new date();
this.year = this.now.getfullyear();
this.month = this.now.getmonth();
this.day = this.now.getdate();
}
today = new gettoday();
function newcalendar() {
today = new gettoday();
var parseyear = parseint(document.all.year
[document.all.year.selectedindex].text);
var newcal = new date(parseyear,
document.all.month.selectedindex, 1);
var day = -1;
var startday = newcal.getday();
var daily = 0;
if ((today.year == newcal.getfullyear()) &&(today.month == newcal.getmonth()))
day = today.day;
var tablecal = document.all.calendar.tbodies.daylist;
var intdaysinmonth =getdays(newcal.getmonth(), newcal.getfullyear());
for (var intweek = 0; intweek < tablecal.rows.length;intweek++)
for (var intday = 0;intday < tablecal.rows[intweek].cells.length;intday++)
{
var cell = tablecal.rows[intweek].cells[intday];
if ((intday == startday) && (0 == daily))
daily = 1;
if(day==daily)
//今天,调用今天的class
cell.classname = "today";
else if(intday==6)
//周六
cell.classname = "sunday";
else if (intday==0)
//周日
cell.classname ="satday";
else
//平常
cell.classname="normal";
if ((daily > 0) && (daily <= intdaysinmonth))
{
cell.innertext = daily;
daily++;
}
else
cell.innertext = "";
}
}
function getdate() {
var sdate;
//这段代码处理鼠标点击的情况
if ("td" == event.srcelement.tagname)
if ("" != event.srcelement.innertext)
{
sdate = document.all.year.value + "年" + document.all.month.value + "月" + event.srcelement.innertext + "日";
alert(sdate);
}
}
</script>
</head>
<body onload="newcalendar()" onunload="window.returnvalue = document.all.ret.value;">
豆腐制作,都是精品
<br>
<a href="http://www.asp888.net" targer=_blank>豆腐技术站</a>为大家提供最新最好的技术
<input type="hidden" name="ret">
<table id="calendar" cellspacing="0" cellpadding="0">
<thead>
<tr>
<td colspan=7 align=center>
<select id="month" onchange="newcalendar()">
<script language="javascript">
for (var intloop = 0; intloop < months.length;
intloop++)
document.write("<option value= " + (intloop + 1) + " " +
(today.month == intloop ?
"selected" : "") + ">" +
months[intloop]);
</script>
</select>
<select id="year" onchange="newcalendar()">
<script language="javascript">
for (var intloop = today.year-50; intloop < (today.year + 4);
intloop++)
document.write("<option value= " + intloop + " " +
(today.year == intloop ?
"selected" : "") + ">" +
intloop);
</script>
</select>
</td>
</tr>
<tr class="days">
<script language="javascript">
document.write("<td class=satday>" + days[0] + "</td>");
for (var intloop = 1; intloop < days.length-1;
intloop++)
document.write("<td>" + days[intloop] + "</td>");
document.write("<td class=sunday>" + days[intloop] + "</td>");
</script>
</tr>
</thead>
<tbody border=1 cellspacing="0" cellpadding="0" id="daylist"align=center onclick="getdate()">
<script language="javascript">
for (var intweeks = 0; intweeks < 6; intweeks++) {
document.write("<tr style=cursor:hand>");
for (var intdays = 0; intdays < days.length;
intdays++)
document.write("<td></td>");
document.write("</tr>");
}
</script>
</tbody>
</table>
<center><input style="width:50pt" type=button value="cancel" onclick="cancel();"></center>
</body>
</html>
<script language="javascript1.2">
function cancel() {
document.all.ret.value = "";
window.close();
}
</script>
