Javascript 写 calendar

enzoboy · 发表于 5-5-2012 12:17 PM

这是小弟最近的功课
要用 Javascript 写一个让 user 输入出生年份,然后就会显示那人出生的那个月份的日历
现在问题来了,小弟在 for loop 方面真的很弱,
不知道如何写一个one dimenson array 类型的 table，
希望各位大大可以帮忙,
我google 了很多 calendar 的 source code,
可是都看不明白（很多没看过的code）
我老师说普通的又简单的 code就可以写了..
求各位大大帮忙
以下是小弟的半成品.....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<script>
var month = ["Jan","Feb","Mar","Apr","May","Jun","July","Aug","Sept","Oct","Nov","Dec"];
var maxDay = ["31","28","31","30","31","30","31","31","30","31","30","31"];
var leapMaxDay = ["31","29","31","30","31","30","31","31","30","31","30","31"];
var inpDOB = prompt("DOB Format : dd/mm/yyyy");
result = inpDOB.split("/");
document.write(result);
function validDate(y,m,d)
{
var err=0;
if(y<1900 || y > 2012)
err++;
if(y%4==0)
maxDays[1] = 29;
if(m<1 || m>12)
err++;
if(d<1 || d>maxDays[m-1])
err++;
if(err>0)
return false;
else
return true;
}
</script>
</body>
</html>

复制代码

kingdom_manga · 发表于 7-5-2012 02:24 AM

不明白你想要什么

keat8303 · 发表于 9-5-2012 11:10 PM

不如你举个例子让人比较容易明白你要的是什么

enzoboy · 发表于 10-5-2012 12:15 AM

比如 user input [12-12-1990]
我就要display 一个 1990年 12月的 calendar
然后要把12号highlight 起来..

onlylonly · 发表于 10-5-2012 12:57 PM

本帖最后由 onlylonly 于 10-5-2012 03:00 PM 编辑

回复 1# enzoboy

我老师说普通的又简单的 code就可以写了..

真的很简单的就 ( 2 行code）

<html>
<head>
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<script src="http://jqueryui.com/jquery-1.7.2.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.datepicker.js"></script>
<script>
$(function() {
$( "#cal" ).datepicker();
//07-jan -1978
$( "#cal" ).datepicker("setDate", new Date('1978', '00', '07'));
});
</script>
<title>Really Simple Calendar</title>
</head>
<body>
<div id="cal"></div>
</body>
</html>

复制代码

怕死被打的就写多一点

<html>
<head>
<script>
// i.e, last day of feb-2012 is 29
function getLastDayOfMonth(dateObj)
{
var dateOfLastDay = new Date(dateObj.getFullYear(), dateObj.getMonth() + 1, 0);
return dateOfLastDay.getDate();
}
// i.e, month start at tuesday
// 0 - sun
// 1 - mon
// ...
// 6 - sat
function getDayOfMonthStart(dateObj)
{
var dateOfFirstDay = new Date(dateObj.getFullYear(), dateObj.getMonth(), 1);
return dateOfFirstDay.getDay();
}
function printCal(birthDate)
{
//calendar content initialized with calendar header
var calContent = "<tr><td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thr</td><td>Fri</td><td>Sat</td>";
var beginPrintingTrigger = false;
var day = 1;
for(var i = 0; day <= getLastDayOfMonth(birthDate); i++)
{
if( i == 0 )
calContent += "<tr>";
else if( i % 7 == 0 )
calContent += "</tr><tr>";
//print empty slot before first day of cal start
if( beginPrintingTrigger == false )
{
//start to print?
if( i == getDayOfMonthStart(birthDate))
beginPrintingTrigger = true;
else
//print empty slot if month not yet started
calContent += "<td></td>";
}
if( beginPrintingTrigger == true )
{
//highlight birth day
if( day == birthDate.getDate() )
calContent += "<td><strong>" + day++ + "</strong></td>";
else
//print normal day
calContent += "<td>" + day++ + "</td>";
}
}
calContent += "</tr>";
document.getElementById("cal").innerHTML = calContent;
}
</script>
<title>Really Simple Calendar</title>
</head>
<body>
<table id="cal"></table>
<script>
//birthday at 07-may-1978
//new Date(yyyy,mm - 1, dd);
printCal(new Date('1978','04','07'));
</script>
</body>
</html>

复制代码

sample 而已，自己link function，自己 error check

		自动登录	找回密码
密码			注册

Javascript 写 calendar

所属分类: 电脑手机

浏览过的版块