免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
› 论坛 › 程序设计 › Web开发 › 自己写的JS日历暂存，大家也指导下，学JS的作品
最近访问板块 发新帖
查看: 2616 | 回复: 3
打印 上一主题 下一主题

自己写的JS日历暂存，大家也指导下，学JS的作品 [复制链接]

SCerZZ

论坛徽章:
0
跳转到指定楼层
1楼 [收藏(0)] [报告]
发表于 2008-08-04 00:33 |只看该作者 |倒序浏览
先申明下，主要是因为公司能上的网络很有限，反正就是其他方法我基本有限制，我在家写了点东西要到公司电脑上，没办法，发到这里来了，老大后天之前千万不要删啊？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="text/javascript" src="./calendar.js"></script>
</head>

<body>
<div id="calendar_main">
&nbsp;&nbsp;&nbsp;&nbsp;<div id="calendar_header"><!-- 显示星期几那一行 -->
&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" id="calendar_pre_day" value="<" onclick="">
&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" id="calendar_nex_day" value=">" onclick="">
&nbsp;&nbsp;&nbsp;&nbsp;<select id="calendar_select_month">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<OPTION VALUE="" SELECTED>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<OPTION VALUE="">
&nbsp;&nbsp;&nbsp;&nbsp;</select>

&nbsp;&nbsp;&nbsp;&nbsp;<select id="calendar_select_year">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<OPTION VALUE="" SELECTED>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<OPTION VALUE="">
&nbsp;&nbsp;&nbsp;&nbsp;</select>
&nbsp;&nbsp;&nbsp;&nbsp;</div>

&nbsp;&nbsp;&nbsp;&nbsp;<div id="calendar_week"><!-- 星期几的列表 -->
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<table class="calendar_week_table">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>Sun
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>Mon
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>Tue
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>Wed
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>Thu
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>Fri
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>Sat
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</table>
&nbsp;&nbsp;&nbsp;&nbsp;</div> <!-- end calendar_week -->

&nbsp;&nbsp;&nbsp;&nbsp;<div id="calendar_main_date">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<table class="calendar_main_date_table">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td><div class="calendar_content_block">1</div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td><div class="calendar_content_block">2</div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td><div class="calendar_content_block">3</div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td><div class="calendar_content_block">4</div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td><div class="calendar_content_block">5</div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td><div class="calendar_content_block">6</div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td><div class="calendar_content_block">7</div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</table>
&nbsp;&nbsp;&nbsp;&nbsp;</div><!-- end calendar_main_date -->
</div><!-- end calendar_main -->
<script type="text/javascript" language="javascript">
var c = new Calendar();
c.writeMainData();
</script>
</body>

</html>
SCerZZ

论坛徽章:
0
2楼 [报告]
发表于 2008-08-04 00:34 |只看该作者
再发一个，再次恳求不要删啊～～

#calendar_main, #calendar_header, #calendar_week #calendar_main_date{

width:280px;
}

#calendar_main {
border:2px solid black;
height:250px;
background-color:#FFFFCC;
}
#calendar_header {

height:25px;
background-color:gray;
}

#calendar_pre_day, #calendar_nex_day, #calendar_select_month, #calendar_select_year{
border:1px solid black;
}

#calendar_pre_day, #calendar_nex_day
{
width:20px;
height:20px;
margin-left:13px;
margin-top:2px;
}

#calendar_week
{
background-color:white;
}

.calendar_week_table{
border-top:1px solid black;
border-bottom:1px solid black;
}

.calendar_week_table td, .calendar_main_date_table td{
width:40px;
font-size:14px;
text-align:center;
font-weight:bold;
}

#calendar_main_date{

}

.calendar_main_date_table td{

}

.calendar_content_block{
border:1px solid #FFCCCC;
}

.calendar_content_block_nom{
border:1px solid #FFCCCC;
color:#FF9966;
}



function Calendar() {
&nbsp;&nbsp;&nbsp;&nbsp;this.cur_date = new Date();
&nbsp;&nbsp;&nbsp;&nbsp;this.con_date = new Date();

&nbsp;&nbsp;&nbsp;&nbsp;this.con_date.setMonth(this.cur_date.getMonth()-1);
&nbsp;&nbsp;&nbsp;&nbsp;this.con_date.setDate(0);
&nbsp;&nbsp;&nbsp;&nbsp;this.last_date = this.con_date.getDate();


&nbsp;&nbsp;&nbsp;&nbsp;this.con_date.setDate(1);
&nbsp;&nbsp;&nbsp;&nbsp;this.first_day = this.con_date.getDay();

&nbsp;&nbsp;&nbsp;&nbsp;this.time_for_show_str = "";

&nbsp;&nbsp;&nbsp;&nbsp;/* 一些需要配置的东西 */
&nbsp;&nbsp;&nbsp;&nbsp;this.element_for_timeshow = "Calendar_time_show";//显示时间的地方
&nbsp;&nbsp;&nbsp;&nbsp;this.element_for_mainshow = "calendar_main_date";

&nbsp;&nbsp;&nbsp;&nbsp;//document.write("sdf");
}

Calendar.prototype.showTime = function() {
&nbsp;&nbsp;&nbsp;&nbsp;window.obj = this;
&nbsp;&nbsp;&nbsp;&nbsp;var cr_date = new Date();
&nbsp;&nbsp;&nbsp;&nbsp;var time_for_show_str = cr_date.getHours() + ":" + cr_date.getMinutes() + ":" + cr_date.getSeconds() + "<br />";
&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(this.element_for_timeshow).innerHTML = time_for_show_str;
&nbsp;&nbsp;&nbsp;&nbsp;var timeID = setTimeout("obj.showTime();",1000);
}

/*
返回本月第一天是星期几
*/
Calendar.prototype.getFirstDay = function() {
&nbsp;&nbsp;&nbsp;&nbsp;return this.first_day;
}

Calendar.prototype.getLastDate = function() {
&nbsp;&nbsp;&nbsp;&nbsp;return this.last_date;
}

/*
写入中间主要的数据
*/
Calendar.prototype.writeMainData = function() {
//document.write("sdf");
var pre_month_date = new Date();
pre_month_date.setMonth(this.con_date.getMonth());
pre_month_date.setDate(0);//设定为最后一天

var pre_month_dates = pre_month_date.getDate();
var pre_month_last_day = pre_month_date.getDay();

var w_block = pre_month_dates - pre_month_last_day;

if(pre_month_last_day == 6)
{
&nbsp;&nbsp;&nbsp;&nbsp;w_block = 1;
}
var have_write_con_month = false;
&nbsp;&nbsp;&nbsp;&nbsp;
var str_for_write = "";
for(var r = 0; r < 6; r++)
{
&nbsp;&nbsp;&nbsp;&nbsp;str_for_write += "<table class=\"calendar_main_date_table\"\n<tr>\n";
&nbsp;&nbsp;&nbsp;&nbsp;for(var c = 0; c < 7; c++)
&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(pre_month_last_day >= 0 && pre_month_last_day != 6)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//document.write(pre_month_last_day);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;str_for_write += "<td><div class=\"calendar_content_block_nom\">" + w_block + "</div></td>\n";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(pre_month_last_day == 0)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;w_block = 1;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pre_month_last_day--;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pre_month_last_day--;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;w_block++;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (!have_write_con_month)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;str_for_write += "<td><div class=\"calendar_content_block\">" + w_block + "</div></td>\n";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(w_block == this.last_date)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;w_block = 1;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;have_write_con_month = true;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;w_block++;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;str_for_write += "<td><div class=\"calendar_content_block_nom\">" + w_block + "</div></td>\n";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;w_block++;
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;str_for_write += "</tr>\n</table>\n";
}//end for

document.getElementById(this.element_for_mainshow ).innerHTML = str_for_write;
}
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
7717060

论坛徽章:
0
3楼 [报告]
发表于 2008-08-04 20:37 |只看该作者
支持一下
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
mobiao123456

论坛徽章:
0
4楼 [报告]
发表于 2008-08-06 14:37 |只看该作者
支持牛人^^^^
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号：11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们：huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP